Automatically create set of form fields

Most of time we need to create dynamically set of form fields. In this
example when we click add button then create two new fields. And we
 can remove that group field after click remove button.

Screenshot :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  
 <script type="text/javascript">  
   var rowNum = 0;  
   function addNewFields(frm) {  
     rowNum++;  
     var row = '<p id="rowNum' + rowNum + '"><input type="text" name="first_name[]" value="' + frm.first_name.value + '"><input type="text" name="last_name[]" value="' + frm.last_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';  
     jQuery('#itemRows').append(row);  
     frm.first_name.value = '';  
     frm.last_name.value = '';  
   }  
   function removeRow(rnum) {  
     jQuery('#rowNum' + rnum).remove();  
   }  
 </script>  
 <form action="" method="post">  
   <div id="itemRows">  
     <input name="first_name" type="text"/>  
     <input name="last_name" type="text"/>  
     <input onclick="addNewFields(this.form);" type="button" value="Add"/>  
   </div>  
 </form>  

Download from this link. Click here to download.