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>

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));

        return false;

    });

});