JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="reOrder">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>
<div id="space"></div>
<table id="tableOrder">
    <tbody>
        <tr id="tbl-item2">
            <td>Item 2</td>
        </tr>
        <tr id="tbl-item3">
            <td>Item 3</td>
        </tr>
        <tr id="tbl-item1">
            <td>Item 1</td>
        </tr>
        <tr id="tbl-item4">
            <td>Item 4</td>
        </tr>
    </tbody>
</table>

CSS

.highlight { background-color: red }
#space { height: 30px }

JavaScript

$(function() {

var tbl = $("#tableOrder tbody");

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

    var li_element = this;

    setTimeout(
        function() {

            $("#reOrder li, #tableOrder tbody tr").removeClass("highlight");
            $(li_element).addClass("highlight");

            var li_id = $(li_element).attr("id");

            var li_item_number = li_id.match(/item([0-9]*)/)[1];

            var correspondingTR = tbl.find("#tbl-item" + li_item_number).addClass("highlight");

            tbl.append(correspondingTR)

        },
        2500 * index
    );

});


});