JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>One</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
    <tr><td>Two</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
    <tr><td>Three</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
    <tr><td>Four</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
    <tr><td>Five</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
    <tr><td>Six</td><td class='up'>Move up</td><td class='down'>Move down</td></tr>
</table>

CSS

table {
    width: 90%;
}

.up, .down {
    cursor: pointer;
    color: blue;
}

.odd {
    background-color: yellow;
}

.even {
    background-color: cyan;
}

JavaScript

function highlightRows() {
    $('table tr:odd td').addClass('odd');
    $('table tr:even td').addClass('even');
}

highlightRows();

$('.up').click(function() {
    var parent = $(this).parents('tr');
	var prev = $(parent).prev();

    $(parent).insertBefore(prev);
    highlightRows();
});
                 
$('.down').click(function() {
    var parent = $(this).parents('tr');
	var next = $(parent).next();

    $(parent).insertAfter(next);
    highlightRows();
});