JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Click and drag gray area to change row order</h3>

CSS

td {
    padding: 4px 40px;
    background-color: #ccc;
    cursor: pointer;
}

JavaScript

function countRows() {
    var i = 0;
    $('#offices td input').each(function () {
        $(this).attr("value", ++i);
    });
}

// create table fragment
var $tbl = $("<table id='offices'></table>");
// add rows
var nRows = 10;
for (var n = 0; n < nRows; n++) {
    $tbl.append("<tr><td>Row " + n.toString() + " <input type='text'/></td></tr>");
}
// inject table into DOM
$(document.body).append($tbl);
// number the rows
countRows();
// make table sortable
$tbl.children("tbody").sortable({
    stop: function (event, ui) {
        countRows(); // re-number rows after sorting
    }
});