JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr id="one" data-id="one" data-rank="1">
        <td>Item One</td>
        <td>
            <button class="change-rank" data-direction="up">&#9650;</button>
            <button class="change-rank" data-direction="down">&#9660;</button>
        </td>
    </tr>
    <tr id="two" data-id="two" data-rank="2">
        <td>Item Two</td>
        <td>
            <button class="change-rank" data-direction="up">&#9650;</button>
            <button class="change-rank" data-direction="down">&#9660;</button>
        </td>
    </tr>
    <tr id="three" data-id="three" data-rank="3">
        <td>Item Three</td>
        <td>
            <button class="change-rank" data-direction="up">&#9650;</button>
            <button class="change-rank" data-direction="down">&#9660;</button>
        </td>
    </tr>

CSS

table {margin:20px;}
button {cursor:pointer;}

JavaScript

$(document).on("click", 'button.change-rank', function() {
																				 
		
		var moveDirection = $(this).attr('data-direction');
		
		var original = $(this).parents('tr').attr('id');
        var originalID = $('#'+ original + '').attr('data-id');
		var originalRank = $('#'+ original + '').attr('data-rank');
		var originalRow = $('#'+ original + '').html();
		
		if (moveDirection == 'up') {
			var switchTo = $(this).parents('tr').prev().attr('id');
		}//end if UP
		
		if (moveDirection == 'down') {
			var switchTo = $(this).parents('tr').next().attr('id');
		}//end if DOWN
		
		var switchID = $('#'+ switchTo + '').attr('data-id');
		var switchRank = $('#'+ switchTo + '').attr('data-rank');
		var switchRow = $('#'+ switchTo + '').html();
		
		//POST variables to actions.php via $.ajax
        //Do the rest after $.ajax is successful
		
		$('#'+ original + '').html(switchRow);
		$('#'+ switchTo + '').html(originalRow);

		$('#'+ original + '').attr('id', switchTo).attr('data-id', switchID);
		
        if (moveDirection == 'up') {
		  $('#'+ switchTo + '').attr('id', original).attr('data-id', originalID);
		}
		else if (moveDirection == 'down') {
          $('#'+ switchTo + '').next().attr('id', original).attr('data-id', originalID);
		}
    });