JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="test">
    <div id="drop" class="box"><p>Drop it here</p></div>
</div>

CSS

.box { width: 50px; height: 50px; border: 1px solid #000; background: #cfc; }
#drop { width: 100px; height: 100px; background: #efe; }

JavaScript

var count = 0;
function makeDraggable() {
  $('#drag').remove();
    var child = $('<div id="drag" class="box"><p>Drag me (' + count + ')</p></div>').draggable({helper: 'clone', opacity: 0.35, start: function() { setTimeout(function() { child.remove(); }, 1000);}});
  $('#test').append(child);  
}
function makeDraggable2() {
  $('#new').remove();
    var child = $('<div id="new" class="box"><p>Dr (' + count + ')</p></div>').draggable({helper: 'clone', opacity: 0.35, start: function() { setTimeout(function() { child.remove(); }, 1000);}});
  $('#test').append(child);  
}

makeDraggable();
$('#drop').droppable({
  drop: function () {
    count += 1;
    $('#drop').html('<p>Dropped ' + count + '</p>');
    makeDraggable2();
  }
});