jQuery UI sortable > sort one, reflect in another container

by lasha

HTML

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
<div class="container">
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 3</div>
    <div>Row 4</div>
    <div>Row 5</div>
</div>

JavaScript

var $container = $(".container");
var $elements = $container.children();
var $elToMove;
var startingIndex;
$("#sortable").sortable({
    start: function( event, ui ) {
        var $children = $container.children();
        $children.css("border","");
        
        startingIndex = ui.item.index();
        $elToMove = $children.eq(startingIndex).css("border","1px solid #000");
    },
    update: function( event, ui ) {
        var index = ui.item.index();
        if(index === 0){
            $container.children().eq(0).before($elToMove);
            console.log(index);
            return;
        }
        if(startingIndex > index){
            $container.children().eq(index-1).after($elToMove);
            return;
        }
        $container.children().eq(index).after($elToMove);
        console.log($elToMove, index);
    }
});

setTimeout(function(){
    $("#sortable").append("<li>Item 6</li>");
    $(".container").append("<div>Row 6</div>");
    $('#sortable').sortable("refresh");
},2000);