JSFiddle - React, Tailwind, and code Playground

HTML

!--main container-->
<div class="container">
<div id="panel">
    <div class="addable">
        <h2>Big Bad Box</h2>
    </div>
</div>
<div id="droppable">
<p>drop something</p>
</div>
</div>
<!--end main container-->

CSS

#droppable{
margin-left:340px;
height:500px;
width:500px;
background:#e5e5e5;
}
#panel{
width:200px;
position:fixed;
left:0;
top:0;
height:100%;
background:#f5f5f5;
}

.addable {
width:180px;
height:180px;
text-align:center;
margin:10px;
background:#e5e5e5;
border:2px dotted #cacaca;
float:left;
}
html .container .addable {
background:none;
}
.addable h2{
position:relative;
top:35%;
vertical-align:middle;
}

JavaScript

$(function() {
        var $drag = $( ".addable" ),
            $drop = $( "#droppable" );
            $id=1;
        $( ".addable" ).draggable({
            cancel: "a.ui-icon", 
            revert: "invalid", 
            helper: "clone",
            cursor: "move"
        });

        $drop.droppable({
            accept: ".addable",
            activeClass: "ui-state-highlight",
                        greedy:true,
            drop: function( event, ui ) {
            $temp=$(ui.draggable).clone().attr("id",$id);
            var $theid = appendnow( $temp,$drop );
            //alert($theid);
            }
        });
        
        function appendnow( $item, $whereto ) {
        $id++;
        $item.appendTo( $whereto).droppable({
                        accept: '*',                  
                        drop: function(e,ui){alert('hi')}
                          });
        return $id;
        
        }
    });