JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>One</td>
<td>
<a href="#" class="first">First</a>
<a href="#" class="last">Last</a>
</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="first">First</a>
<a href="#" class="last">Last</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="first">First</a>
<a href="#" class="last">Last</a>
</td>
</tr>
<tr>
<td>Four</td>
<td>
<a href="#" class="first">First</a>
<a href="#" class="last">Last</a>
</td>
</tr>
<tr>
<td>Five</td>
<td>
<a href="#" class="first">First</a>
<a href="#" class="last">Last</a>
</td>
</tr>
</table>
JavaScript
$(document).ready(function(){
$(".first,.last").click(function(){
var row = $(this).parents("tr:first");
var rows= row.parents().find("tr");
if ($(this).is(".first")) {
row.insertBefore(rows[0]);
} else {
row.insertAfter(rows[rows.length]);
}
});
});