JSFiddle - React, Tailwind, and code Playground

HTML

<span id="addRow">Add a row</span>
<table>
    <tr id="tr" class="cloneableRow">
        <td class="row form-group">
            <input type="text" name="name" id="first" />    
        </td>
        <td class="row form-group">
            <input type="text" name="name" id="second" />
        </td>
        <td class="row form-group">
            <input type="text" name="name" id="third" />
        </td>
        <td class="row form-group">
            <input type="text" name="name" id="forth" />
        </td>
        <td class="text-center">
            <a href="#" disabled="disabled">
                <i class="fa fa-trash-o"></i>
            </a>
        </td>
    </tr>
</table>

JavaScript

$(function() {
    var cloneCount = 1;
    var idNameList = ['first', 'second', 'third', 'fourth'];
    $('#addRow').on('click', function() {
        $("#tr").clone().attr('id', 'id'+cloneCount++ ).insertAfter("#tr");
        
        var $lastRow = $(".cloneableRow:last td");
        $lastRow.each(function(index){
            $(this).find('input').attr('id', idNameList[index] + ($(".cloneableRow").size()-1));          
        });      
    });
});