JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table" id="customList">
    <thead>
        <tr>
            <th>Number</th>
            <th>Item</th>
            <th>Attribute</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Order">1</td>
            <td data-label="Item"><a href="#" class="trigger">MOVE</a></td>
            <td data-label="Attribute">
                <input type="text" name="n1" id="i1" value="tim" />
            </td>
        </tr>
        <tr>
            <td data-label="Order">2</td>
            <td data-label="Item"><a href="#" class="trigger">MOVE</a></td>
            <td data-label="Attribute">
                <input type="text" name="n2" id="i2" value="lisa" />
            </td>
        </tr>
        <tr>
            <td data-label="Order">3</td>
            <td data-label="Item"><a href="#" class="trigger">MOVE</a></td>
            <td data-label="Attribute">
                <input type="text" name="n3" id="i3" value="bob" />
            </td>
        </tr>
        <tr>
            <td data-label="Order">4</td>
            <td data-label="Item"><a href="#" class="trigger">MOVE</a></td>
            <td data-label="Attribute">
                <input type="text" name="n4" id="i4" value="max" />
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
    var rowFirstChoice;
    var rowSecondChoice;
    
    $('.trigger').click(function () {
        
        if(!rowFirstChoice) {
            
            $('.trigger').not(this).text('HERE');
            rowFirstChoice = $(this).closest('tr');
            
        } else {
            $(this).closest('tr').before(rowFirstChoice);
            
            $('.trigger').text('MOVE');
            rowFirstChoice = undefined;
            rowSecondChoice = undefined;
            
            // renumber 
            $('#customList > tbody > tr > td:first-child').text(function(i){
                return i + 1;
            });
        }
    });
});