JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<button class="button-add">add</button>
<button class="button-remove">remove</button>
<div id="selectable">
  <div class="selectable-content">Item1</div>
  <div class="selectable-content">Item2</div>
  <div class="selectable-content">Item3</div>
  <div class="selectable-content">Item4</div>
  <div class="selectable-content">Item5</div>
</div>

CSS

#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

JavaScript

// this creates the selected variable
// we are going to store the selected objects in here
var offset = {top:0, left:0};
var elemId = 0;

// starting position of the divs
var i = 0;
$(".selectable-content").each( function() {
    $(this).css({
        top: i * 42 
    });
    i++;
    elemId++;
});

// buttons
$(".button-add").on("click", function(e) {
	elemId++;
	var el = $('<div class="selectable-content">Item' + elemId + '</div>');
	$("#selectable").append(el);
  update();
});
$(".button-remove").on("click", function(e) {
  $(".ui-selected").each(function() {
    $(this).remove();
  });
});

function update() {
  $(".selectable-content").draggable({
      start: function(ev, ui) {
          if (!$(this).hasClass("ui-selected")) {
            $(".ui-selected").each(function() {
              var el = $(this);
              el.removeClass("ui-selected");
            });
            $(this).addClass("ui-selected");
          }
          $(".ui-selected").each(function() {
            var el = $(this);
            el.data("offset", el.offset());
          });
          offset = $(this).offset();
      },
      drag: function(ev, ui) {
          var dt = ui.position.top - offset.top;
          var dl = ui.position.left - offset.left;
          $(".ui-selected").each(function() {
              var el = $(this);
              var eloffset = el.data("offset");
              el.css({top: eloffset.top + dt, left: eloffset.left + dl});
          });
      }
  });

  $("#selectable").selectable();

  $(".selectable-content").click( function(e){
      $(".ui-selected").each(function() {
          $(this).removeClass("ui-selected");
      });
      $(this).addClass("ui-selected");

      $( "#selectable" ).data("selectable")._mouseStop(null);
  });
}
update();