JSFiddle - React, Tailwind, and code Playground
HTML
<table id="dlList" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tbody>
<tr>
<td>
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tbody>
<tr class="table-headers">
<td width="300" align="center">Description</td>
<td width="80" align="left">
<span id="dlList_lblSortHeaderx">Sort</span>
</td>
<td width="100"></td>
</tr>
<tr>
<td colspan="6">
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="padding-top padding-bottom border-bottom" style="color:Black;background-color:White;">
<table id="dlList_Table1_0" style="width:100%;">
<tbody>
<tr id="dlList_rwGroupHeading_0">
<td id="dlList_Tablecell1_0" class="td9Header" align="center" colspan="6">
<input type="text" />
</td>
</tr>
<tr id="dlList_rwCategoryHeading_0" class="margin-botom">
<td id="dlList_Tablecell6_0" class="td9Header padding-bottom padding-top" align="center" colspan="6" style="background-color:#EBEBEB;">
<span id="dlList_lblCategoryHeadingx_0" style="font-size: 20px; font-weight: bold;">Heading</span>
</td>
</tr>
<tr id="dlList_rwItem_0">
...
JavaScript
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("#dlList > tbody > tr").first();
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});