JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="button" value="Add" class="plusbtn" />
<input type="button" value="Remove" class="minusbtn" />
</div>
<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
<tr>
<td>Name</td>
<td>Emp no.</td>
<td>Company</td>
<td>Mobile no.</td>
</tr>
<tr class="row">
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="text" class="txtbox" value="" /></td>
<td><input type="text" class="txtbox" value="" /></td>
</tr>
</table>
CSS
<style>
.txtbox {
border: none;
width: 100%;
}
input {
font-size: 17px;
height: 30px;
}
table {
background: none repeat scroll 0 0 #abcdef;
border: 1px solid #000;
}
</style>
JavaScript
$(document).ready(function () {
toggleRemoveButton();
})
$('.plusbtn').click(function() {
var clone = $(".test .row:first").clone().appendTo(".test");
$('.txtbox', clone).val('');
toggleRemoveButton();
});
$('.minusbtn').click(function() {
if($(".test .row").length > 1)
{
$(".test .row:last").remove();
}
toggleRemoveButton();
});
function toggleRemoveButton()
{
if($(".test .row").length >= 2)
{
$('.minusbtn').show();
}
else
{
$('.minusbtn').hide();
}
}