JSFiddle - React, Tailwind, and code Playground

HTML

<h1>3 Droppable Divs</h1>
<div id='droppables'>
<div id='div1'>
    DROP HERE FIRST
</div>
<div id='div2'>
    DROP HERE SECOND
</div>

<div id='div3'>
    DROP HERE THIRD
</div>
</div>
<div id='draggables'>
    <div id='drag1' class='drag' data-object='X'>
        DRAG ME X
    </div>
    <div id='drag2' class='drag' data-object='Y'>
        DRAG ME Y
    </div>
    <div id='drag3' class='drag' data-object='Z'>
        DRAG ME Z
    </div>
</div>
<div id='status'>
    Div1 value : <div id='div1_value'>null</div>
    Div2 value : <div id='div2_value'>null</div>
    Div3 value : <div id='div3_value'>null</div>
</div>

CSS

#div1{
background-color:yellow;
    height:50px;
    width:100px;
}
#div2{
    background-color:red;
    height:50px;
    width:100px;
}
#div3{
    background-color:blue;
    height:50px;
    width:100px;
    
}
.drag
{
    border: 1px solid black;
    width:50px;
}
}

JavaScript

var counter = 0;
$('.drag').draggable({
                helper: 'clone',
                revert: 'invalid',

            });
$('#div1').droppable({
    accept: '#draggables .drag, #droppables .drag',
    drop: function(event, ui)
    {
        counter++;
        if(counter != 1)
            {
                $(this).find('.ui-draggable').appendTo($('#draggables'));
                counter = 1;
            }
        $(this).text('');
        $('#div1_value').text(ui.draggable.data('object'));
        $(ui.draggable).appendTo(this);
        
    }
});
$('#div2').droppable({
    accept: '#draggables .drag, #droppables .drag',
    drop: function(event, ui)
    {
        counter++;
        if(counter != 1)
            {
                $(this).find('.ui-draggable').appendTo($('#draggables'));
                counter = 1;
            }
        $(this).text('');
        $('#div2_value').text(ui.draggable.data('object'));
        $(ui.draggable).appendTo(this);
        
    }    
});
$('#div3').droppable({
    accept: '#draggables .drag, #droppables .drag',
    drop: function(event, ui)
    {
        counter++;
        if(counter != 1)
            {
                $(this).find('.ui-draggable').appendTo($('#draggables'));
        $('#div3_value').text(ui.draggable.data('object'));
                counter = 1;
            }
        $(this).text('');
        $(ui.draggable).appendTo(this);
        
    }
});