JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><input type="hidden" name="Order[1]" value="0" />Item 1</li>
<li><input type="hidden" name="Order[2]" value="1" />Item 2</li>
<li><input type="hidden" name="Order[3]" value="2" />Item 3</li>
<li><input type="hidden" name="Order[4]" value="3" />Item 4</li>
<li><input type="hidden" name="Order[5]" value="4" />Item 5</li>
<li><input type="hidden" name="Order[6]" value="5" />Item 6</li>
<li><input type="hidden" name="Order[7]" value="6" />Item 7</li>
<li><input type="hidden" name="Order[8]" value="7" />Item 8</li>
<li><input type="hidden" name="Order[9]" value="8" />Item 9</li>
<li><input type="hidden" name="Order[10]" value="9" />Item 10</li>
</ul>

CSS

li { padding: 5px; border: solid 1px; }

JavaScript

$(function () {
    $('ul').sortable({
        update : function(e, ui) {
            var ul = $(ui.item).closest('ul');
            var index = 0;
            var toPost = {};
            ul.find('> li').each(function() {
                index++;
                $(this).find('input').val(index);               
                toPost[$(this).find('input').attr('name')] = index;
            });                  
            $.ajax({
                url : '/echo/json/',
                data : toPost,
                type : 'POST',
                dataType : 'json',
                success : function(resp) {
                    console.log(resp);
                },
                error : function() {
                    alert('There was a problem');
                }
            });
        }
    });
});