JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> 

 
  <div id="box"> 
  
    <div class="box" id="s1"> 
      <ul> 
                <li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li> 
                <li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li>           
                <li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li> 
                <li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li>           
                <li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li> 
                <li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li>           
                <li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li> 
                <li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li> 
            </ul> 
    </div> 
  
  </div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin-top: 10px;
}
 
ul {
  margin: 0;
}
 
#s1,#s2 {
  float: left;
  width: 820px;
}
 
#s1 li,#s2 li {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 10px;
  background-color:#00CCCC;
  border: #CCCCCC solid 1px;
  color:#fff;
  float:left;
}

JavaScript

$(document).ready(function(){ 
               
  $(function() {
    $("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
      var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
      //$.post("updateDB.php", order);
            alert(order);                                
    }                  
    });
  });
 
});