Comparing a Text Element and a String

I'm struggling to understand where I'm going wrong. I'm using a draggable/droppable element and I'm extracting the <p> tag value using:

var rightNumber = ui.draggable.text();

and assigning it to the variable rightNumber. The value of the <p> tag is set to '4' (but can be changed dynamically). I want to use an if/else statement to compare the value of rightNumber with the value extracted from the <p> tag but it always defaults to false, irrespective of whether rightNumber actually equals "4". Running these two lines tells me the variable rightNumber is a string and its value is 4...

1. alert($.type(rightNumber));
   alert(rightNumber);

but running the if/else statement below always reverts to false. My understanding is that this is likely because I'm not actually comparing two strings, as both elements are objects?

I've tried every possible combination of if((rightNumber === "4") { 

I can think of but to no avail. What am I doing wrong? 
 

1. if(rightNumber == "4") {
2. if(rightNumber === "4") {
3. if(String(rightNumber) === String("4")) {

HTML Code

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

1. <div id="a2" class="answerCard">
                   <p class="noselect">4</p>
               </div>

jQuery Code

1. $(document).ready(function() {
       
       $(".answerCard").draggable();
           
       $(".dropRight").droppable({
           drop: function(event, ui) {
           $(ui.draggable).detach().css({top: 0, left: 750}).appendTo(this);
               
           var rightNumber = ui.draggable.text();
               
           alert("The Number on the Right = " + rightNumber);
               
               if(String(rightNumber) === String("4")) {
                   alert("Correct Answer!");            
               }
               else {
                   alert("Incorrect Answer!");
               }
           } 
       });

[출처] https://forum.jquery.com/topic/comparing-a-text-element-and-a-string