JSFiddle - React, Tailwind, and code Playground

by neo2014

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>
    <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

$('.plusbtn').click(function() {
	    $(".test tr:last-child").clone().appendTo(".test");
      	$('.txtbox').removeAttr('value');
        
       if($(".test tr").length > 2)
        {
          $('.minusbtn').show();

        }
        
	});
  
	$('.minusbtn').click(function() {
		if($(".test tr").length != 2)
			{
				$(".test tr:last-child").remove();
			}
	   else
			{
				//alert("You cannot delete first row");
        $('.minusbtn').remove();
        
			}
	});