JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropwin"></div>
<div id="dragables">
    <div id="d1" class="d"></div>
    <div id="d2" class="d"></div>
    <div id="d3" class="d"></div>
    <div id="d4" class="d"></div>
</div>
<button id="b1">Remove d1</button>
<button id="b2">Remove d2</button>
<button id="b3">Remove d3</button>
<button id="b4">Remove d4</button>

CSS

#dropwin { width: 300px; height: 300px; border: 1px solid #f00;}
#dragables { width: 300px; height: 70px; border: 1px solid #00f; }
.d { width: 50px; height: 50px; margin: 10px; display: inline-block; }
#d1 { background: #f00; }
#d2 { background: #ff0; }
#d3 { background: #f0f; }
#d4 { background: #0ff; }

JavaScript

$(".d").draggable({
        containment: '#dropwin',
        stack: '#dragables div',
        cursor: 'move',
      });

$("#b1").on("click", function() { $("#d1").remove(); })
$("#b2").on("click", function() { $("#d2").remove(); })
$("#b3").on("click", function() { $("#d3").remove(); })
$("#b4").on("click", function() { $("#d4").remove(); })