JSFiddle - React, Tailwind, and code Playground

HTML

<button>Swap Values</button>
<div style="display:inline-block">
<div id="selectable" class="mySel">
    <div value=Item1>Item1</div>
    <div value=Item2>Item2</div>
    <div value=Item3>Item3</div>
    <div value=Item4>Item4</div>
</div>

<div id="selectable2" class="mySel2">
    <div value=Item1>Item1</div>
    <div value=Item2>Item2</div>
    <div value=Item3>Item3</div>
    <div value=Item4>Item4</div>
    <div value=Item5>Item5</div>
    <div value=Item6>Item6</div>
    <div value=Item7>Item7</div>
    <div value=Item8>Item8</div>
</div>
</div>

CSS

*{padding:6px; font-size:1.1em}

.mySel, .mySel2{
height: 300px;
width: 200px;
overflow: auto;
border: solid 2px black;
margin-bottom: 20px;
float:left;
margin:10px;
}

.mySel > DIV, .mySel2 > DIV{
height: 50px;
border: solid 1px red;
}

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable2 .ui-selecting { background: #FECA40; }
#selectable2 .ui-selected { background: #F39814; color: white; }

JavaScript

function testFor($o, $p) { //two collections of Items we are comparing
        var retVal = true; //By default, this script returns true, a mismatched pair results in a return: false;
        $o.each(function() { //Look at each element in the first collection
            var thisDivValue = $(this).attr('value'); //Grab it's value=""
            if ($p.parent().find('div[value=' + thisDivValue + ']').not('.ui-selected').length > 0) { //Search in the opposite collection for an item with a matching value that is NOT selected for swapping, if you find it, return false.
                retVal = false;
                return false;
            }
            else {return true;}
        });
        return retVal; //True or false depending on what was set above.
    }
function showError() {
    alert('DUPLICATE FOUND');
}
$("#selectable, #selectable2").selectable();
$(".mySel, .mySel2").sortable({
    tolerance: 'pointer',
    connectWith: '.mySel, .mySel2',
    helper: 'original',
    scroll: true
});
$('button').click(function() {
    var v = $('#selectable2>div');
    var w = $('#selectable>div');
    var x = $('#selectable .ui-selected');
    var y = $('#selectable2 .ui-selected');
    if ((w.length - x.length + y.length) > 4) {return false;}
    if ((v.length - y.length + x.length) > 8) {return false;}
    if (testFor(x, y) && testFor(y, x)) { //Both of these tests must return TRUE in order for the swap to happen
        $('#selectable .ui-selected').removeClass('ui-selected').appendTo('#selectable2');
        $('#selectable2 .ui-selected').removeClass('ui-selected').appendTo('#selectable');
    }
    else {showError();}
});