JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div class="left">
            <ul></ul>
        </div>
        <div class="right">
            <ul>
                <li data-order="1" >Item 1</li>
                <li data-order="2" >Item 2</li>
                <li data-order="3" >Item 3</li>
                <li data-order="4" >Item 4</li>
                <li data-order="5" >Item 5</li>
                <li data-order="6" >Item 6</li>
                <li data-order="7" >Item 7</li>
                <li data-order="8" >Item 8</li>
                <li data-order="9" >Item 9</li>
                <li data-order="10" >Item 10</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </div>

CSS

.container { width: 900px;margin: 0 auto; }
            .container ul li { border: 1px solid #000;border-radius: 5px;list-style: none outside none;margin-bottom: 10px;margin-right: 30px;padding: 5px; }
            .container ul li:hover { background-color: #F2FFF2;cursor: pointer; }
            div.left { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
            div.right { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }

JavaScript

jQuery(document).ready(function() { 
            jQuery("div.right").delegate("ul li", "click", function() {             
                jQuery("div.left ul").append(jQuery(this));
               var sortedLis =  jQuery("div.left ul").find(" li").sort(function(a,b){
       var first  = $(a).data('order');
       var second  = $(b).data('order');
       return parseInt(first) - parseInt(second);
         });
    jQuery("div.left ul").empty().append(sortedLis);
            });
        });