JSFiddle - React, Tailwind, and code Playground

HTML

<p>Sortable 1</p>
<ul id="sortable1">
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

<p>Sortable 2</p>
<ul id="sortable2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 6</li>
</ul>

CSS

body {
    padding: 10px;
}

ul {
    border: 1px solid black;
    margin-bottom: 10px;

}

li {
    border: 1px dotted black;
    margin: 2px;
    padding: 2px;
}

JavaScript

$('#sortable1').sortable({
    connectWith: '#sortable2',
    remove: function(event, ui) {
        $(this).append($(ui.item[0]).clone());
    },
    receive: function(event, ui) {
        $(this).children().each(function() {
            if($(this).text() == $(ui.item[0]).text())
                $(this).remove();
        });
    }
});

$('#sortable2').sortable({
    connectWith: '#sortable1'
});