JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="element">
    			<li class="item">0</li>
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
    	</ul>

    	<select name="list1" multiple="true" class="list_hidden" id="list">
    			<option id="opt0" selected="selected" value="0">0</option>
                <option id="opt1" selected="selected" value="1">1</option>
                <option id="opt2" selected="selected" value="2">2</option>
                <option id="opt3" selected="selected" value="3">3</option>
    	</select>

JavaScript

jQuery(document).ready(function ($) {
    function sort() {
        $('.element').sortable({
       update: function (event, ui) {
          var draggingElement = $('.item');
          $("#list").empty();
          draggingElement.each(function () {
            $("#list").append($('<option />').attr('id','opt'+$(this).text()).attr('value',$(this).text()).attr('selected', 'selected').text($(this).text()));
         });
      }
});
};
sort();
});