JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<ul id="workspace">
    <li>item1 <button class="remove">X</button> </li>
    <li>item2 <button class="remove">X</button></li>
    <li>item3 <button class="remove">X</button></li>    
</ul>
<ul id="toolbox">
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>    
</ul>

JavaScript

$("#workspace").sortable({
    receive:function(ev,ui){
        ui.item.append(" <button class='remove'>X</button>");
    }
});
$("#toolbox").sortable({
    connectWith:"#workspace"
});
$("#workspace").on("click",".remove",function(e){
    
    $(this).parent().detach().appendTo("#toolbox");
    $(this).remove();
});