JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post">
    <table id="items">
        <tr>
            <th>Item</th>
            <td>
                <input type="text" name="field1_row0"
                value="field1_row0">
            </td>
            <td>
                <input type="text" name="field2_row0"
                value="field2_row0">
            </td>
        </tr>
    </table>
    <input type="button" id="newItem" value="Add Row">
</form>

JavaScript

var curItem = 0;
$(document).ready(function() {
    $("#newItem").click(function() {
        curItem++;
        addItem($("#items"), curItem);
    });
});

function addItem(elem, iter) {
    var lastRow = elem.find("tr:last");
    var newRow = lastRow.clone();

    newRow.find(":input").each(function() {
        var newName = $(this).attr("name")
            .replace(/^(.*_row)\d+$/, "$1" + iter);

        $(this).attr({
            name: newName,
            value: newName
        });

        console.log(this);
    });

    lastRow.after(newRow);

    console.log($("form").serialize());
}