JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<table id="document-data">
    <tr>
        <td>Name</td>
        <td>Title</td>
        <td>Select Test</td>
    </tr>
    <tr class="new-document-meta">
        <td><input type="text" name="name"></td>
        <td><input type="text" name="title"></td>
        <td>
            <select name="select-test[0]">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </td>
    </tr>
</table>
<a href="#" id="add-row">Add row</a>

JavaScript

$(document).ready(function() {
        $('a#add-row').click(function() {
            var Rows = $('table#document-data tr').length;
            var ParentClone = $('table#document-data tr.new-document-meta').last();
            var ParentHtml = $('table#document-data tr').last();
            ParentClone.clone().insertAfter(ParentHtml).find("select").each(function() {
                var $item=$(this);
                $item.prop("name","select-test["+Rows+"]");
            });
            $(ParentClone).find('input').each(function() {
                $(this).attr('name', $(this).attr('name') + Rows);
            });
        });
    });