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==undefined) {
$('.trigger').text('HERE');
this.innerHTML = "MOVE";
rowFirstChoice = $(this).parent().siblings().find("> input");
} else if (rowSecondChoice==undefined) {
rowSecondChoice = $(this).parent().siblings().find("input");
var firstValue = rowFirstChoice.val();
rowFirstChoice.val(rowSecondChoice.val());
rowSecondChoice.val(firstValue);
$('.trigger').text('MOVE');
rowFirstChoice = undefined;
rowSecondChoice = undefined;
}
});
});