EVOLUTION-NINJA
Edit File: clone.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(document).ready(function(){ //We will be using an unique index number for each new instance of the cloned form var phone_number_form_index=0; //When the button is clicked (or Enter is pressed while it's selected) $("#add_phone_number").click(function(){ //Increment the unique index cause we are creating a new instance of the form phone_number_form_index++; //Clone the form and place it just before the button's <p>. Also give its id a unique index $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index)); //Make the clone visible by changing CSS $("#phone_number_form" + phone_number_form_index).css("display","inline"); //For each input fields contained in the cloned form... $("#phone_number_form" + phone_number_form_index + " :input").each(function(){ //Modify the name attribute by adding the index number at the end of it $(this).attr("name",$(this).attr("name") + phone_number_form_index); //Modify the id attribute by adding the index number at the end of it $(this).attr("id",$(this).attr("id") + phone_number_form_index); }); //When the Remove button is clicked (or Enter is pressed while it's selected) $("#remove_phone_number" + phone_number_form_index).click(function(){ //Remove the whole cloned div $(this).closest("div").remove(); }); }); }); </script> <div id="phone_number_form" class="hidden"> <p> Phone number : <input type="text" name="fa" id="mahendra"> <input type="button" id="remove_phone_number" value="Remove"> </p> </div> <form> <p> <input type="button" value="Add phone number" id="add_phone_number"> </p> </form>