JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="draggable1" class="drag">Drag me to my target</li>
    <li id="draggable2" class="drag">Drag me to my target</li>
    </ul>


<div id="droppable1" class="drop">
    <p>Drop here 1</p>
</div>
<div id="dropable2" class="drop">
    <p>drop here 2</p>
</div>

JavaScript

var count;
    $(function() {
        $( ".drag" ).draggable({
            revert: true
        });
        $( ".drop" ).droppable({
            drop: function( event, ui ) {
                /*$( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );*/
                        createElements(ui.draggable, this);
            }
        });
        
        
        function createElements(dropObject, dropArea){
            if ($(dropObject).is("#draggable1")){
                $(dropArea).find("p").html("draggable1 has been dropped");
            }
            else if ($(dropObject).is("#draggable2")){
                $(dropArea).find("p").html("draggable2 has been dropped");
            }
        }
        
    });