jquery draggable and droppable start and stop function
<p>Can someone tell me why is this second if statement condition is met.</p>

<p>here is the code</p>

<pre><code>$("#car").draggable({
 start: function(event, ui) {
 if (!done) return false;
 },
 stop: function(event, ui) {
 if (counter &gt;= 40 &amp;&amp; $(".correct").length == $(".drop").length) {
 setTimeout(function() {
  $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');

});
</code></pre>

<p>this is the droppable</p>

<pre><code>   $("#carDrop").droppable({
    accept: "#car",
    drop: function(event, ui) {
        if(ui.draggable.is("#car")){
            $(this).addClass("correct");

            ui.draggable.fadeOut(500);
            $(this).fadeOut(500,function(){
            });
        }
    }
   });
</code></pre>

<p>HTML
    <br>
        Picture<br>
    <br>
       </p>

<pre><code>    &lt;div id="soccer"&gt;&lt;p&gt;&lt;img src="web/soccer.png"&gt;&lt;/p&gt;&lt;/div&gt;
    &lt;div id="boat"&gt;&lt;p&gt;&lt;img src="web/boat.png"&gt;&lt;/p&gt;&lt;/div&gt;
    &lt;div id="car"&gt;&lt;p&gt;&lt;img src="web/car.png"&gt;&lt;/p&gt;&lt;/div&gt;

&lt;/div&gt; 
 &lt;div class="wrap2" &gt;

    &lt;div id="carDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/car.png" &gt;&lt;/p&gt;&lt;/div&gt;
    &lt;div id="soccerDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/soccer.png" &gt;&lt;/p&gt;&lt;/div&gt;
     &lt;div id="boatDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/boat.png" &gt;&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I checked the length of .correct and .drop using alert box and the length of correct is 8 and the length of .drop is 5. But when i drag an image and drop it it the second if statement is working, it doesnt make sense.</p>

<p>Here is the full code.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).load(function(){
  //---------------------------toggle-----------------------
$( ".picture" ).click(function() {
  $( "#picture" ).toggle();

});

//==========================================================
    var timer;
    var done = true;

    $("#startClock").click(function() {

    var counter = 60;
     var winner = 0;
    var winners = 0;
    var winnercountry= 0;
    var finish= 0;



//===============================================CAR DRAGGABLE===================

    $("#car, #boat, #soccer").draggable({
    start: function(event, ui) {
    if (!done) return false;
    },
    stop: function(event, ui) {
    if (counter &gt;= 40 &amp;&amp; $(".correct").length == $(".drop").length) {
    setTimeout(function() {
     $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');

     $( "#picture" ).hide( "fold", 500 );
     $(".picture").toggleClass('disabled');
     $( ".numberbutton" ).click(function() {
  $( "#numbercontent" ).toggle();

});

       counter = 61;
    }, 500);
    winner=3;
    finish= 1;




    }
    else if (counter &gt;= 30 &amp;&amp; $(".correct").length == $(".drop").length) {
    setTimeout(function() {
      $('#win').text(winner+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#picture" ).hide( "fold", 500 );
    $(".picture").toggleClass('disabled');
      $( ".numberbutton" ).click(function() {
  $( "#numbercontent" ).toggle();

});

        counter = 61;

    }, 500);
    winner=2;
    finish =1;



    }
    else if (counter &gt;= 1 &amp;&amp; $(".correct").length == $(".drop").length) {
    setTimeout(function() {
   $('#win').text(winner+' '+'star'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#picture" ).hide( "fold", 500 );
    $(".picture").toggleClass('disabled');
      $( ".numberbutton" ).click(function() {
  $( "#numbercontent" ).toggle();

});

        counter = 61;

    }, 500);
    winner=1;
    finish =1;



    }

    }
    });

   //=========================================CAR DRAGGABLE END==========================

   //==========================================BOAT DRAGGABLE=================================

      $("#two, #five, #six").draggable({

    start: function(event, ui) {
    if (!done) return false;
    },
    stop: function(event, ui) {
    if (counter &gt;= 40 &amp;&amp; $(".correct1").length == $(".drop").length) {

    setTimeout(function() {
    $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#numbercontent" ).hide( "fold", 500 );
    $(".numberbutton").toggleClass('disabled');
     $( ".countrybutton" ).click(function() {
  $( "#countrycontent").toggle();

});

        counter = 61;

    }, 500);
    winners=3;
    finish =2;

    }
    else if (counter &gt;= 30 &amp;&amp; $(".correct1").length == $(".drop").length) {
    setTimeout(function() {
      $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#numbercontent" ).hide( "fold", 500 );
    $(".numberbutton").toggleClass('disabled');
     $( ".countrybutton" ).click(function() {
  $( "#countrycontent" ).toggle();

});

        counter = 61;
    }, 500);
    winners=2;
    finish =2;

    }
    else if (counter &gt;= 1 &amp;&amp; $(".correct1").length == $(".drop").length) {
    setTimeout(function() {
      $('#win1').text(winners+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#numbercontent" ).hide( "fold", 500 );
    $(".numberbutton").toggleClass('disabled');
     $( ".countrybutton" ).click(function() {
  $( "#countrycontent" ).toggle();

});

        counter = 61;
    }, 500);
    winners=1;
    finish =2;

    }

    }
    });

    $("#canada, #japan, #china").draggable({

    start: function(event, ui) {
    if (!done) return false;
    },
    stop: function(event, ui) {
    if (counter &gt;= 40 &amp;&amp; $(".correct2").length == $(".drop").length) {
    setTimeout(function() {
    $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#countrycontent" ).hide( "fold", 500 );
    $(".countrybutton").toggleClass('disabled');
       clearInterval(timer);
        $("&lt;div title='You did it!'&gt;"+'Total Score:'+ ' '+ total+' Star(s)'+'&lt;br&gt;'+'&lt;a href="Midterm.html"&gt;Play Again&lt;/a&gt;'+"&lt;/div&gt;").dialog();


    }, 500);
    winnercountry=3;
    total = winnercountry + winners + winner;

    }
    else if (counter &gt;= 30 &amp;&amp; $(".correct2").length == $(".drop").length) {
    setTimeout(function() {
      $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#countrycontent" ).hide( "fold", 500 );
    $(".countrybutton").toggleClass('disabled');
       clearInterval(timer);
          $("&lt;div title='You did it!'&gt;"+'Total Score:'+ ' '+ total+' Star(s)'+'&lt;br&gt;'+'&lt;a href="Midterm.html"&gt;Play Again&lt;/a&gt;'+"&lt;/div&gt;").dialog();


    }, 500);
    winnercountry=2;
     total = winnercountry + winners + winner;

    }
    else if (counter &gt;= 1 &amp;&amp; $(".correct2").length == $(".drop").length) {
    setTimeout(function() {
       $('#winnercountry').text(winnercountry+' '+'stars'+' '+'earned'+' Completion time'+' '+ counter +' seconds');
   $( "#countrycontent" ).hide( "fold", 500 );
    $(".countrybutton").toggleClass('disabled');
       clearInterval(timer);
          $("&lt;div title='You did it!'&gt;"+'Total Score:'+ ' '+ total+' Star(s)'+'&lt;br&gt;'+'&lt;a href="Midterm.html"&gt;Play Again&lt;/a&gt;'+"&lt;/div&gt;").dialog();

    }, 500);
    winnercountry=1;
     total = winnercountry + winners + winner;

    }

    }
    });



    if (!timer) {
    timer = setInterval(function() {
    counter--;
    if (counter &gt;= 0) {
    $("#count").text(counter);
    }
    if (counter === 0 &amp;&amp; winner === 0 &amp;&amp; finish === 0) {
    $('#win').text(winner+' '+'Star earned');
     $( "#picture" ).hide( "fold", 500 );
    $(".picture").addClass('disabled');
     $( ".numberbutton" ).click(function() {
  $( "#numbercontent" ).toggle();

});
     counter=60;
        winner=0;
        finish = 1;

    }
      if (counter &gt;= 0) {
    $("#count").text(counter);
    }
    if (counter === 0 &amp;&amp; winners === 0  &amp;&amp; finish === 1) {
    $('#win1').text(winners+' '+'Star earned');
     $( "#numbercontent" ).hide( "fold", 500 );
    $(".numberbutton").addClass('disabled');

     $( ".countrybutton" ).click(function() {
  $( "#countrycontent" ).toggle();

});
     counter=60;
       winners=0;
       finish = 2;
    }
      if (counter === 0 &amp;&amp; winnercountry === 0 &amp;&amp; finish === 2) {
    $('#winnercountry').text(winnercountry+' '+'Star earned');
     $( "#countrycontent" ).hide( "fold", 500 );
    $(".countrybutton").addClass('disabled');
     $("&lt;div title='Oh no!'&gt;"+'Total Score:'+ ' '+ total+' Star(s)'+'&lt;br&gt;'+'&lt;a href="Midterm.html"&gt;Play Again&lt;/a&gt;'+"&lt;/div&gt;").dialog();

     counter=60;
      clearInterval(timer);


    }
    total = winnercountry + winners + winner;

    }, 1000);


    }


    });
//==================================================END SOCCER DRAGGABLE================================

//===================================================CAR DROPPABLE================================
    $("#carDrop").droppable({
        accept: "#car",
        drop: function(event, ui) {
            if(ui.draggable.is("#car")){
                $(this).addClass("correct");

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                });
            }
        }
    });
//===================================================CAR DROPPABLE END================================

//===================================================BOAT DROPPABLE================================
  $("#boatDrop").droppable({
    accept: "#boat",
    drop: function(event, ui) {
            if(ui.draggable.is("#boat")){

                $(this).addClass("correct").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });
//===================================================BOAT DROPPABLE END================================

//===================================================SOCCER DROPPABLE================================
  $("#soccerDrop").droppable({
    accept: "#soccer",
    drop: function(event, ui) {
            if(ui.draggable.is("#soccer")){

                $(this).addClass("correct").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });
     $("#twoDrop").droppable({
    accept: "#two",
    drop: function(event, ui) {
            if(ui.draggable.is("#two")){

                $(this).addClass("correct1").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });
     $("#fiveDrop").droppable({
    accept: "#five",
    drop: function(event, ui) {
            if(ui.draggable.is("#five")){

                $(this).addClass("correct1").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });
      $("#sixDrop").droppable({
    accept: "#six",
    drop: function(event, ui) {
            if(ui.draggable.is("#six")){

                $(this).addClass("correct1").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });
       $("#canadaDrop").droppable({
    accept: "#canada",
    drop: function(event, ui) {
            if(ui.draggable.is("#canada")){

                $(this).addClass("correct2").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });

  $("#chinaDrop").droppable({
    accept: "#china",
    drop: function(event, ui) {
            if(ui.draggable.is("#china")){

                $(this).addClass("correct2").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });

  $("#japanDrop").droppable({
    accept: "#japan",
    drop: function(event, ui) {
            if(ui.draggable.is("#japan")){

                $(this).addClass("correct2").find("p").html("correct!");
                done = false;

                ui.draggable.fadeOut(500);
                $(this).fadeOut(500,function(){
                    done = true;
                });
            }
    }
  });

//===================================================SOCCER DROPPABLE END================================
  //=============================================================END OF PICTURE GAME==============================================================================
  //=============================================================END OF PICTURE GAME==============================================================================


});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap{

            width: 40%;



                float: left;
                height: 500px;
                margin-right: 70px;
                margin-top: 10px;


         }
         .wrap2{

         width: 40%;


                float: left;
                   height: 500px;
                margin-top: 10px;

         }




         #startClock{
             background-color: #f1666a;
            padding: 10px;
         }
            a{
                text-decoration: none;
                color: white;

            }

         img{
            width: 100px;

         }
           #win, #win1, #winnercountry{

          font-weight: bold;
          font: 100px;
               color: white;
          margin-bottom: 50px;
         }

        #picture, #numbercontent, #countrycontent{

            width: 100%;

            height: 400px;
            margin: 0 auto;
            text-align: center;
             display: none;


          }
         .picture, .numberbutton, .countrybutton{
             background-color: #f1666a;
         padding: 10px;


          }



         #container{
          width: 30%;
             background-color: #f1666a;
          float: left;

         }
          #twoDrop img, #sixDrop img{
            width: 160px;
            height: 120px;
            }
            #fiveDrop img{
              width: 160px;
              height: 160px;
            }

           #scorecontainer {
            width: 100%;
            height: 150px;
            text-align: center;
          }
          #win, #win1, #winnercountry{
            float: left;
            width: 30%;

          }
            .disabled {
         pointer-events: none;
         cursor: default;
         background-color: gray;
          }
          body{
              background-color: #a2d5e8;
          }


         &lt;/style&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
    &lt;header id="header"&gt;
        &lt;div id="content" class="row-fluid"&gt;
            &lt;div class="span6 pull-right align-right white" style="max-width: 540px;"&gt;
                    &lt;div style="display: block;"&gt;

                        &lt;a id="startClock" class="blink" href="javascript:toggle();" style="display: inline-block;" &gt;Start Game&lt;/a&gt;
                        &lt;span id="count"&gt;60&lt;/span&gt; seconds
                    &lt;/div&gt;

                &lt;/div&gt;
                &lt;div style="clear: both;"&gt;&lt;/div&gt;
            &lt;/div&gt;

    &lt;/header&gt; &lt;!--// END CONTENT //--&gt;

    &lt;br&gt;&lt;br&gt;
    &lt;div id="scorecontainer"&gt;
        &lt;div id="win"&gt;Level 1 Score&lt;/div&gt;
    &lt;div id="win1"&gt;Level 2 Score&lt;/div&gt;
    &lt;div id="winnercountry"&gt;Level 3 Score&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="container"&gt;
        &lt;a href="#" class="picture"&gt;Picture&lt;/a&gt;
    &lt;div id="picture"&gt;
     &lt;div class="wrap" &gt;
       Drag Me
        &lt;div id="soccer"&gt;&lt;p&gt;&lt;img src="web/soccer.png"&gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div id="boat"&gt;&lt;p&gt;&lt;img src="web/boat.png"&gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div id="car"&gt;&lt;p&gt;&lt;img src="web/car.png"&gt;&lt;/p&gt;&lt;/div&gt;

    &lt;/div&gt; &lt;!--// END WRAPPER //--&gt;
     &lt;div class="wrap2" &gt;
         Drop me
        &lt;div id="carDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/car.png" &gt;&lt;/p&gt;&lt;/div&gt;
        &lt;div id="soccerDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/soccer.png" &gt;&lt;/p&gt;&lt;/div&gt;
         &lt;div id="boatDrop" class="drop ui-droppable"&gt;&lt;p&gt;&lt;img src="web/boat.png" &gt;&lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

        &lt;!--========================================Container for Number game============================================--&gt;
    &lt;div id="container"&gt;
        &lt;a href="#" class="numberbutton"&gt;Numbers&lt;/a&gt;
        &lt;div id="numbercontent"&gt;
            &lt;div class="wrap" &gt;
               Drag Me
            &lt;div id="two"&gt;&lt;p&gt;&lt;img src="web/0.png"&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div id="five"&gt;&lt;p&gt;&lt;img src="web/two.png"&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div id="six"&gt;&lt;p&gt;&lt;img src="web/six.png"&gt;&lt;/p&gt;&lt;/div&gt;

            &lt;/div&gt; &lt;!--// END WRAPPER //--&gt;
            &lt;div class="wrap2" &gt;
               Drop me
                &lt;div id="twoDrop"&gt;&lt;p&gt;&lt;img src="web/44.png" &gt;&lt;/p&gt;&lt;/div&gt;
                &lt;div id="fiveDrop"&gt;&lt;p&gt;&lt;img src="web/5.png" &gt;&lt;/p&gt;&lt;/div&gt;
                &lt;div id="sixDrop"&gt;&lt;p&gt;&lt;img src="web/3.png" &gt;&lt;/p&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
     &lt;div id="container"&gt;
            &lt;a href="#" class="countrybutton"&gt;Country&lt;/a&gt;
            &lt;div id="countrycontent"&gt;
               &lt;div class="wrap" &gt;
                   Drag Me
                   &lt;div id="china"&gt;&lt;p&gt;China&lt;/p&gt;&lt;/div&gt;
                   &lt;div id="japan"&gt;&lt;p&gt;Japan&lt;/p&gt;&lt;/div&gt;
                   &lt;div id="canada"&gt;&lt;p&gt;Canada&lt;/p&gt;&lt;/div&gt;

              &lt;/div&gt; &lt;!--// END WRAPPER //--&gt;
              &lt;div class="wrap2" &gt;
                 Drop me
                   &lt;div id="japanDrop"&gt;&lt;p&gt;&lt;img src="web/japan.png" &gt;&lt;/p&gt;&lt;/div&gt;
                   &lt;div id="canadaDrop"&gt;&lt;p&gt;&lt;img src="web/canada.png" &gt;&lt;/p&gt;&lt;/div&gt;
                   &lt;div id="chinaDrop"&gt;&lt;p&gt;&lt;img src="web/china.png" &gt;&lt;/p&gt;&lt;/div&gt;

               &lt;/div&gt;
            &lt;/div&gt;
       &lt;/div&gt;

&lt;/body&gt;</code></pre>
</div>
</div>
</p>