JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbox">
  <div class="draggable">drag</div>
  <div class="draggable">drag</div>
  <div class="draggable">drag</div>
  <div class="draggable">drag</div>
</div>
<div id="container"></div>

CSS

#container {
  width: 200px;
  height: 200px;
  background: yellow;
  padding: 5px;
}

.draggable {
  width: 40px;
  height: 20px;
  margin: 2px;
}

JavaScript

$("#container").droppable({
        // accept draggables only from #toolbox,
        // this will prevent cloning of the draggables(inside drop event handler),
        //  that already have been dropped inside #container
        accept: "#toolbox .draggable",
        drop: function(event, ui) {
          // when a draggable is dropped: 
          // 1: clone it's helper 
          // 2: Make the helper draggable
          // 3: set containment to #container
          console.log(ui.helper.context.innerHTML);
          if ($("#container div").length == 0) {
            $(this).append($(ui.helper).clone().draggable({
              containment: "parent"
            }));
          } else {
            $("#container").empty();
            $(this).append($(ui.helper).clone().draggable({
              containment: "parent"
            }));
          }

        }
      });
      $(".draggable").draggable({
        revert: "invalid",
        helper: "clone"
      });