JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<form id="form1" name="form1" method="post" action="">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
        <tr>
            <td>
                <input type="text" name="item[]" id="11" />
            </td>
            <td>
                <input type="text" name="recommendations[]" id="12" />
            </td>
            <td>
			          <input type="text" name="importance[]" id="13" />
            </td>
            <td>
                <input type="text" name="quantity[]" id="14" />
            </td>
            <td><a href="#">del</a></td>
        </tr>
    </table>
</form>
<button type="button" id="addRow">add row</button>

CSS

table tr>td{padding: 10px;}
table tr:first-child>td>a{display: none;}

JavaScript

function addTableRow(e) {
		var row = $('#mans tr:last');
    		row = row.clone(true);
        row.find('>td>input').each(function(){
        		var t = $(this), id = t.attr('id'), new_id = id*1+10;
        		t.attr('id',new_id);
        });
			$('#mans').append(row);
}

function removeRow(e){
	e.preventDefault();
	$(this).parents('tr').remove();
}
$(function () {
		$('#addRow').on('click', addTableRow);
    $('table tr>td>a').on('click', removeRow);
});