When I click on an "Add" button, it would create a new form with the "First Name", "Last Name" field and 2 textboxes, just like the original.
So if I click on the "Add" button 5 times, it would create 5 new forms for me. Same idea applies for the "Delete" button.

Here's my code:

<!DOCTYPE html>
<meta charset=utf-8 />
<title>JS Bin</title>
   <FORM NAME="myForm">
   First Name: <input type="text" name="1stName" ><br />
   Last Name: <input type="text" name="lastName" ><br /><br />
   <input id="bu_add" type="button" value="Add" >
   <input id="bu_delete" type="button" value="Delete">

If you can help me out, I would greatly appreciated. Or if you know what this is call, I can just look it up.


you would like add new fields in out your the form or create new form with fields described above?

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form - Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="formDiv">
<table id="myTable" width="600px" cellpadding="0px" cellspacing="0px">
  <tr><td>First Name</td><td><input type="text" name="txtFirstName[]" /></td></tr>
  <tr><td>Last Name</td><td><input type="text" name="txtLastName[]" /></td></tr>
<hr />
<div class="appendDiv">
<input class="addNewForm" type="button" value="Add" >
<script type="text/javascript">
        $('.appendDiv').append('<div class="subForm">'+$('.formDiv').html()+'<input class="deleteForm" type="button" value="Delete" ><hr /></div>');