JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="mainCol1" class="col">
    <ul>
        <li>hello world 1</li>
        <li>hello world 2</li>
        <li>hello world 3</li>
    </ul>
</div>
<div id="selection">
    selection
</div>
<div id="mainCol2" class="col">
    <ul>
        <li>hello world 4</li>
        <li>hello world 5</li>
        <li>hello world 6</li>
    </ul>    
</div>

CSS

.col {
    background: red;
}

#selection {
    background: blue;
}

JavaScript

$('#mainCol1 li').click(function(){
    
    var item = $('#mainCol1 li').index(this);
    var total = $('#mainCol1 li').length - 1;
    fillSelection($('#mainCol1 li:eq(' + item + ')').html());
    for(i = total; i > item; i--){
        $('#mainCol2 ul').prepend($('#mainCol1 li:eq(' + i + ')'));
    }
    
});

$('#mainCol2 li').click(function(){
    
    var item = $('#mainCol2 li').index(this);
    var total = $('#mainCol2 li').length - 1;
    fillSelection($('#mainCol2 li:eq(' + item + ')').html());
    for(i = 0; i < item; i++){
        $('#mainCol1 ul').append($('#mainCol2 li:eq(0)'));
    }
    
    
});

function fillSelection(html){
    $('#selection').text(html);
}