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>
        <tr id="tbl-item1">
            <td>Item 1</td>
        </tr>
        <tr id="tbl-item2">
            <td>Item 2</td>
        </tr>
        <tr id="tbl-item3">
            <td>Item 3</td>
        </tr>
        <tr id="tbl-item4">
            <td>Item 4</td>
        </tr>        
    </tbody>    
</table>

CSS

span { cursor: pointer; color: blue; padding:0px 3px 0px 3px; border-right:1px solid black }

JavaScript

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

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

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


    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 tbl = $("#tableOrder tbody");

        $("#reOrder li").each(function(index) {
            var li_id = $(this).attr("id");
            //Find the number of the item. Eg "item4" should result in "4"
            var li_item_number = li_id.match(/item([0-9]*)/)[1];
            //Inside #tableOrder, find the element (a <tr>) with id corresponding the this <li>'s id. Eg "item4"'s corresponding table row's id is "#tbl-item4"
            var correspondingTR = tbl.find("#tbl-item" + li_item_number);

            tbl.append(correspondingTR);
        });

        return false;
    });


    });