JSFiddle - React, Tailwind, and code Playground

HTML

<table id="ordertable" style="border:1px solid;">
    <tr>
        <td></td>
        <td>
            <input type="text" title="notes">
        </td>
        <td>
            <input type="text" title="amount">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="text" title="notes">
        </td>
        <td>
            <input type="text" title="amount">
        </td>
    </tr>
</table>

JavaScript

function test() {
    var table = document.getElementById("ordertable");
    var rowcountAfterDelete = table.rows.length;
    for (var i = 0; i < rowcountAfterDelete; i++) {
        table.rows[i].id = "row_" + i;
        table.rows[i].cells[0].innerHTML = i + "<input type='checkbox' id='chk_" + i + "'>";
        table.rows[i].cells[1].getElementsByTagName("input")[0].id = "notes_" + i;
        table.rows[i].cells[2].getElementsByTagName("input")[0].id = "amount_" + i;
    }
}

test();