JSFiddle - React, Tailwind, and code Playground

HTML

<div class='SyncLists'>
    <ul id='left' class='SyncLists' get_value='5'>
        <li id='left1' class='SyncLists'>left1</li>
        <li id='left2' class='SyncLists'>left2</li>
        <li id='left3' class='SyncLists'>left3</li>
        <li id='left4' class='SyncLists'>left4</li>
    </ul>
</div>

<div class='SyncLists'>
    <ul id='right' class='SyncLists' get_value='5'>
        <li id='right1' class='SyncLists'>right1</li>
        <li id='right2' class='SyncLists'>right2</li>
        <li id='right3' class='SyncLists'>right3</li>
        <li id='right4' class='SyncLists'>right4</li>
    </ul>
</div>

<button id="all">Move All</button>

CSS

div.SyncLists
{
	display:inline-block;
    margin: 0 10px 0 0;
 
}

ul.SyncLists
{
    margin-top:0px;
    margin-bottom:0px;
    cursor: default; 
    height: 150px; 
    overflow-y: auto;
    width: 150px;
	padding: 2px;
    font-family: Arial, sans-serif; 
    font-size: 0.9em;
    border: 1px solid #dfd9c3; 
    color: #312e25;
}

li.SyncLists
{
	width: 100%;
    padding:1px
}

li.SyncLists:hover
{
    padding:1px;
    border: 0px solid #327e04; 
    background: #67b021 url(images/ui-bg_highlight-soft_25_67b021_1x100.png) 50% 50% repeat-x; 
    font-weight: bold; 
    color: #ffffff;
}

JavaScript

$('#left').sortable(
{
    connectWith: '#right',
    receive: function (event, ui)
    {
        SetValue(ui, 'true');
    }
}).disableSelection();

$('#right').sortable(
{
    connectWith: '#left',
    receive: function (event, ui)
    {
        SetValue(ui, 'false');
    }
}).disableSelection();

function SetValue(ui, value)
{
    var $item = $(ui.item);
    var $parent = $item.parent();

    alert($item.attr('id') + ' - ' + $parent.attr('get_value') + ' - ' + value);
};

$('#all').click(function() 
{
    $('#left li').appendTo('#right');
});