JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tinyurl.com/889ufwc">

<ul id="unassigned" class="connectedSortable">
        <li class="ui-state-default"><div class="draggable_area">Item 1u</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
        <li class="ui-state-default"><div class="draggable_area">Item 2u</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
        <li class="ui-state-default"><div class="draggable_area">Item 3u</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
        <li class="ui-state-default"><div class="draggable_area">Item 4u</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
        <li class="ui-state-default"><div class="draggable_area">Item 5</div><div class="click_area">&#8594;</div><div class="cl"></div></li>
    </ul>
    
    <ul id="recipients" class="connectedSortable">
        <li class="ui-state-highlight"><div class="draggable_area">Item 1</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
        <li class="ui-state-highlight"><div class="draggable_area">Item 2</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
        <li class="ui-state-highlight"><div class="draggable_area">Item 3</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
        <li class="ui-state-highlight"><div class="draggable_area">Item 4</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
        <li class="ui-state-highlight"><div class="draggable_area">Item 5</div><div class="click_area">&#8592;</div><div class="cl"></div></li>
    </ul>

CSS

.cl{
    clear: both;
    font-size: 0;
    height: 0;
    overflow: hidden;}   

#unassigned, #recipients {
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;}

#unassigned li, #recipients li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;}

.draggable_area{
    float: left;
    width: 150px;
    height: 50px;}
                            
.click_area{
    width: 26px;
    float: right;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 26px;
    cursor: pointer;}

JavaScript

$("#unassigned, #recipients").sortable({
    connectWith: ".connectedSortable",
    items: "li",
    handle: ".draggable_area"
}).disableSelection()
    .on('click', '.click_area', function(){
        $(this).parent().appendTo($("#unassigned, #recipients").not($(this).closest("ul")));
});