JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foods">
                     <div class="draggable" ><img src="http://www.callum-burns.co.uk/book/images/fish.png" id="draggable"></div>
                  
                     <div class="draggable"><img src="http://www.callum-burns.co.uk/book/images/stone.png"></div>

                     <div class="wrong"><img src="http://www.callum-burns.co.uk/book/images/tree.png"></div>
                </div>
<div class="foods">                
<div id="droppable" class="drop">
    <p>Drop here</p>
</div>
</div>

<div class="foods">
            <span class="count"></span> 
</div>

CSS

#draggable { 
    }
    
    #droppable { 
    width: 250px;
    height: 250px;
    padding: 0.5em; 
    float: right; 
    margin: 10px; 
    border: 1px #000 solid;
    }
    
    .drag {
    background:#0C0;
    border: 1px solid #060;    
    }
    
    .drop {
    background: url(http://www.callum-burns.co.uk/book/images/nest.png) no-repeat;
    }

    
    .foods {
    width: 250px;
    height: 200px;
    padding-left: 0px;
    display:inline-block;
    
}

JavaScript

$(function() {
        $( ".draggable" ).draggable();
        $( ".wrong" ).draggable();
        
        $( "#droppable" ).droppable({    
            drop: function( event, ui) {
                console.log($(ui));
                if($(ui.draggable).hasClass("draggable")){
                $( this )
                    .find( "p" )
                        .html( "Correct! :)" );
                } else {
                        $( this )
                        .find( "p" )
                        .html( "Wrong! :(" );
                }
            }
        }); 
    });
   
    
    $('.drop').each(function(){ 
            var n = $(this).children('.draggable').length;
            $(".count").text("There are " + n + " divs inside parent box detail.");
            if(n == 2){
            alert("You got them all right! :)");
            }
            });