JSFiddle - React, Tailwind, and code Playground

by Alvaro Silvino

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-1 col-xs-6">
            <div class="well">
                <ul class="my-list my-list-left">
                    <li data-value="1">Left Item 1</li>
                    <li data-value="2">Left Item 2</li>
                    <li data-value="3">Left Item 3</li>
                    <li data-value="4">Left Item 4</li>
                    <li data-value="5">Left Item 5</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1 col-xs-6">
            <div class="well">
                <ul class="my-list my-list-right">
                    <li data-value="1">Right Item 1</li>
                    <li data-value="2">Right Item 2</li>
                    <li data-value="3">Right Item 3</li>
                    <li data-value="4">Right Item 4</li>
                    <li data-value="5">Right Item 5</li>
                </ul>
            </div>
        </div>
    </div>
</div>

JavaScript

$('ul.my-list-left li').on('click',function () {
     var  total =  $('ul.my-list-right li').length;
     
     $('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index())) 
     }
 });

 $('ul.my-list-right li').on('click',function () {
     var  total =  $('ul.my-list-left li').length; 
     
     $('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index())) 
     }
 });