JSFiddle - React, Tailwind, and code Playground

by Jay Zelenkov

HTML

<table id="fla_inf" width="100%">
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper Type</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Total %</th>
    <th class="tab_header_nam">Add/Remove row</th>
</tr>
<tbody>
<tr>
     <td><select id="marque.0" name="marque,0"></select></td>
     <td><select id="arome.0" name="arome.0"></select></td>
     <td><select id="dropper.0" name="dropper.0"></select></td>
     <td><input id="quantity.0" name="quantity.0" type="number"/></td>
     <td><input id="fla_perc.0" name="fla_perc.0" type="number" min="0" max="100"/></td>
     <td><input class="addline" type="button" value="Add row" /><input class="remline" type="button" value="Remove row" /></td>
</tr>
</tbody>
</table>

JavaScript

$('.addline').click(function () {
        var $tr = $(this).closest('tr');
        var allTrs = $tr.closest('table').find('tr');
        var lastTr = allTrs[allTrs.length-1];
        var $clone = $(lastTr).clone();
        $clone.find('td').each(function(){
            var el = $(this).find(':first-child');
            var id = el.attr('id') || null;
            if(id) {
                var i = id.substr(id.length-1);
                var prefix = id.substr(0, (id.length-1));
                el.attr('id', prefix+(+i+1));
                el.attr('name', prefix+(+i+1));
            }
        });
        $clone.find('input:text').val('');
        $tr.closest('table').append($clone);
    });

// Remove row from the table
    $('.Remline').click(function () {
        $(this).closest('tr').remove();
    });