Dynamic Form

HTML

<div>
  <div>
    ini akan diubah
  </div>
  <table id="customFields">
    <tbody>
      <tr>
      <td>1</td>
        <td>email</td><td><input type="text" name="email1[]" /></td>        
       </tr>
    </tbody>
  </table>
  <p>
    <button class="add" onClick="addMore()">Add More</button>
    <button class="del" onClick="delMore()">Delete</button>
  </p>
</div>
<div>
  <div>
    ini akan diubah
  </div>
  <table>
    <tbody>
    <tr><td>email</td><td><input type="text" name="email2[]" /></td></tr>
    </tbody>
  </table>
  <p>
    <button class="add" onClick="addMore()">Add More</button>
    <button class="del" onClick="delMore()">Delete</button>
  </p>
</div>

CSS

table,tr,td{border:1px solid #cdcdcd;}
.del{display:none;}

JavaScript

$("button.add").click(function(){
	var i=$('#customFields tr').length;
  $(this).siblings("button").show("fast");
  $(this).parent().prev("table").find("tbody").append('<tr><td>'+i+'</td><td>email</td><td><input type="text" /></td></tr>');
  i++;
});
	
$("button.del").click(function(){
  var table = $(this).parent().prev("table");
  var rowCount = table.find("tr").length;
  table.find("tr:last").remove();
  if(rowCount <= 2){
  	$(this).hide("fast");
  }

});