JSFiddle - React, Tailwind, and code Playground
HTML
<div id="form">
<table id="form-headings">
<tr>
<td width="20%">Id</td>
<td width="20%">Name</td>
<td width="13%">Col3</td>
<td width="14%">Col4</td>
<td width="12%">Col5</td>
</tr>
</table><!--table#form-headings-->
<div>
<div class="form-fields">
<table id="abc">
<tr id="0">
<td><input type="text" id="form_id" size="5px"/></td>
<td><input type="text" id="form_name" size="5px"/></td>
<td><input type="text" id="form_col3" size="5px"/></td>
<td><input type="text" id="form_col4" size="5px"/></td>
<td><input type="text" id="form_col5" size="5px"/></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
</div><!--.form-fields-->
</div><!--#row_01-->
<input type="button" id="add-line" value="Add Line" />
<input type="button" id="submit" value="Submit" />
</div><!--#form-->
<table class="prototype" style="display:none">
<tr>
<td><input type="text" id="form_id" size="5px"/></td>
<td><input type="text" id="form_name" size="5px"/></td>
<td><input type="text" id="form_col3" size="5px"/></td>
<td><input type="text" id="form_col4" size="5px"/></td>
<td><input type="text" id="form_col5" size="5px"/></td>
<td><select id="form_cola" ><option>aaa</option></select></td>
<td><button class="remove" id="abca">Remove</button></td>
</tr>
</table><!--table.prototype-->
JavaScript
jQuery(document).ready(function() {
var id = 0;
jQuery("#add-line").click(function() {
id++;
cnt=jQuery('#abc tr').length;
//alert(cnt);
//alert(jQuery('#abc tr').length);
var row = jQuery('.prototype tr').clone(true);
//row.find("input:text").val("");
//alert(row.index());
row.find("td").each(function(index){
//alert($(this).find("input:text").attr("id"));
alert($(this).find("select").attr("id"));
if($(this).find("select").attr("id")){
//alert("aaa");
}
id=$(this).find("input:text").attr("id");
alert($(this).find("input:text").val());
cnt=cnt+1;
if(id=="form_id"){
//alert("id"+id);
}
$(this).find("input:text").attr("id",id+cnt);
//alert("hi");
});
row.attr('id',id);
row.appendTo('#abc');
return false;
});
jQuery("#add-line").click(function() {
jQuery(this).parents("tr").remove();
});
jQuery('#submit').click(function(){
alert();
});
});