JSFiddle - React, Tailwind, and code Playground

HTML

<form id="frmItems" action="#" method="post">
    <ul id="reOrder">
        <li>
            <span class="up">Up1</span>
            <span class="down">Down1</span>
            Item 1
        </li>
        <li>
            <span class="up">Up2</span>
            <span class="down">Down2</span>
            Item 2
        </li>
        <li>
            <span class="up">Up3</span>
            <span class="down">Down3</span>
            Item 3
        </li>
        <li>
            <span class="up">Up4</span>
            <span class="down">Down4</span>
            Item 4
        </li>
    </ul>
    <input type="submit" value="Submit" />
</form> 

<br />

<table id="tableOrder">
    <tbody id="item1">
        <tr>
            <td>Item 1</td>
        </tr>
    </tbody>
    <tbody id="item2">
        <tr>
            <td>Item 2</td>
        </tr>
    </tbody>
    <tbody id="item3">
        <tr>
            <td>Item 3</td>
        </tr>
    </tbody>
    <tbody id="item4">
        <tr>
            <td>Item 4</td>
        </tr>
    </tbody>    
</table>

JavaScript

$("document").ready(function() {


    $('#reOrder li').each(function(index) {

        $(this).attr('id', 'item' + (index + 1));

    });


    var listLength = $('#reOrder li').length;


    $("#reOrder").delegate("#reOrder .up", "click", function() {

        var listIndex = $(this).closest('li').index('#reOrder li');

        var listItem = $(this).closest('li');

        if (listIndex != 0) {

            $("#reOrder li:eq(" + (listIndex - 1) + ")").before(listItem);

        }
    });

    $("#reOrder").delegate("#reOrder .down", "click", function() {

        var listIndex = $(this).closest('li').index('#reOrder li');

        var listItem = $(this).closest('li');

        if (listIndex != listLength) {

            $("#reOrder li:eq(" + (listIndex + 1) + ")").after(listItem);

        }
    });

    $('#frmItems').submit(function() {

        var out = [];

        function processOneLi(node) {

            var nodeIndex = node.index('#reOrder li') + 1;

            var retVal = {
                "prodId": node.attr("id"),
                "indexPos": nodeIndex
            };

            return retVal;
        }

        $("#reOrder").children("li").each(function() {
            out.push(processOneLi($(this)));
        });

        //alert(JSON.stringify(out));
        var itemOrder = JSON.stringify(out);

        $.ajax({
            url: '/ajax_json_echo/',
            cache: true,
            type: 'post',
            dataType: 'json',
            data: itemOrder,
            success: function(data) {
  
            }
    
        });

        //alert(itemOrder);

        return false;

        });


    });