Problem using jQuery to add a cloned form dynamically

Problem using jQuery to add a cloned form dynamically

Hi everyone,i have a form and an add new form link that adds a multiple form like the first one dynamically, and inside the form there is an author text input with also a link to add dynamically multiple author's input. 

the problem is that when i add multiple forms..only in the first form i can add multiple authors, and not in the other forms. and the author's text inputs are added outside the first form.

Can somebody help me identifying the probleme in my code, please.
Also can somebody informe me how ca i add a delete link to delete each form. Thank you.
Here's my code :
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script>
  9. $(document).ready(function() {

  11. var MaxInputs       = 8; //maximum input boxes allowed
  12. var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
  13. var AddForm       = $("#AddMoreForm"); //Add button ID
  14. var AddAuthor       = $("#AddMoreAuthor"); //Add button ID

  16. var x = InputsWrapper.length; //initlal text box count
  17. var FieldCount=1; //to keep track of text box added

  19. $(AddForm).click(function (e)  //on add input button click
  20. {
  21.         if(x <= MaxInputs) //max input box allowed
  22.         {
  23.             FieldCount++; //text box added increment
  24.             //add input box
  25.             $(InputsWrapper).append('<div><form style="border:3px double #F7730E;"  name="forms[]" id="form_'+ FieldCount +'" >Titre:<input type="text" name="Titre[]"><div>Auteur:<input type="text" name="myAuteur[]" id="Auteur_1" value="Auteur 1" /><a href="#" class="removeclass">&times;</a></div><a href="#" id="AddMoreAuthor" class="btn btn-info">Add More Auteur</a></div><input type="submit" value="Ajouter publication" /></form></div>');
  26.             x++; //text box increment
  27.         }
  28. return false;
  29. });

  31. //button d'ajout d'auteur
  32. $(AddAuthor).click(function (e)  //on add auteur input button click
  33. {
  34.         if(x <= MaxInputs) //max input box allowed
  35.         {
  36.             FieldCount++; //text box added increment
  37.             //add input box
  38.             $(InputsWrapper).append('<div>Auteur:<input type="text" name="myAuteur[]" id="Auteur_'+ FieldCount +'" value="Auteur '+ FieldCount +'"/><a href="#" class="removeclass">&times;</a></a></div>');
  39.             x++; //text box incrementb 
  40.         }
  41. return false;
  42. });

  44. $("body").on("click",".removeclass", function(e){ //user click on remove text
  45.         if( x > 1 ) {
  46.                 $(this).parent('div').remove(); //remove text box
  47.                 x--; //decrement textbox
  48.         }
  49. return false;
  50. }) 

  52. });
  53. </script>
  54. </head>

  56. <body>

  58. <a href="#" id="AddMoreForm" class="btn btn-info">Add More Form</a>
  59. <div id="InputsWrapper">
  60. <div><form style="border:3px double #F7730E;" name="forms[]" id="form_1" >Titre:<input type="text" name="Titre[]">
  61. <div>Auteur:<input type="text" name="myAuteur[]" id="Auteur_1" value="Auteur 1"><a href="#" class="removeclass">&times;</a><a href="#" id="AddMoreAuthor" class="btn btn-info" onclick="">Add More Authors</a></div>
  62. <input type="submit" value="Ajouter publication" />
  63. </form></div>

  65. </div>


  68. </body>
  69. </html>