JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" data-arrange="0">Item 1</li>
  <li class="ui-state-default" data-arrange="1">Item 2</li>
  <li class="ui-state-default" data-arrange="2">Item 3</li>
  <li class="ui-state-default" data-arrange="3">Item 4</li>
  <li class="ui-state-default" data-arrange="4">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

JavaScript

if(localStorage.getItem('sort')){
	var array = localStorage.getItem('sort').split(',');
      map = {},
      el = $('ul');
  alert(array);
  $('ul > li').each(function() { 
      var el = $(this);
      map[el.data('arrange')] = el;
  });
  $('ul').html('');
  for (var i = 0; i <= array.length; i++) {
    if (array[i]) {
        $('ul').append(map[array[i]]);
    }
  }
}; //to get.

$( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
       cancel: ".fixed",
      update: function( event, ui ) {
          $(ui.item).appendTo(this);
            var data = [];
        $('#sortable1, #sortable2').find('li').each(function(i) {
            data.push($(this).data('arrange'));
        });
        localStorage.setItem('sort',data); //to set
      }
    }).disableSelection();