JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
    <tr id="1">
        <td>First</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr id="2">
        <td>second</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="3">
        <td>third</td>
        <td>@</td>
        <td>#</td>
    </tr>
    <tr id="4">
        <td>THANKS</td>
        <td>FOR</td>
        <td>HELPING</td>
    </tr>
</table>

JavaScript

$(document).ready(function() {
	var list = init();
	var last = $('#table').find("tr").length;
    $('#table').find("tr").each( function(index,element){
	$(this).prepend($("<button/>").text("↑").bind('click',function()       {up($(this).parent(),last);}));
    $(this).prepend($("<button/>").text("↓").bind('click',function(){down($(this).parent(),last);}));});
    
$('#table').before($('<button />').text("reset").on('click',function(){reset(list);}));
});
	function up(tr,last){
		if( 0 != tr.index() ){
			var prevTr = tr.prev();
			tr.after(prevTr);
		}
	}
	function down(tr,last){
		if( last-1 != tr.index() ){
			var nextTr = tr.next();
			tr.before(nextTr);
		}
	}
	var reset = function(list){
		for(var i = 0 ; i <list.length; i++){
			$("#table").append(list[i].clone(true));	
		}
	};
	var init = function(){
		var list = [];
		$('#table tr').each(function(){
			list.push($(this));
		});
		return list; 
	};