title: Create dymanic textboxes in button onclick & save data to database
body: <p>I am trying to create dynamic textboxes using php &amp; jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;author&lt;/title&gt;
   
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
   
  &lt;style type="text/css"&gt;
   div{
    padding:8px;
   }
  &lt;/style&gt;
   
  &lt;/head&gt;
   
  &lt;body&gt;
   
  &lt;h1&gt;Author&lt;/h1&gt;
   
  &lt;script type="text/javascript"&gt;
   
  $(document).ready(function(){
   
      var counter = 2;
   
      $("#addAuthor").click(function () {
   
   if(counter&gt;10){
              alert("Only 10 authores allow");
              return false;
   }   //addAffiliation
   
   var newauthorDiv = $(document.createElement('div')) 
        .attr("id", 'authorDiv' + counter);
   
   newauthorDiv.after().html('&lt;label&gt; &lt;b&gt; Author '+ counter + ' &lt;/b&gt; &lt;/label&gt;' +
    '&lt;br&gt;&lt;label&gt;Name : &lt;/label&gt;' +
         '&lt;input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" &gt;'+
      '&lt;div id="AffiliationGroup"&gt;&lt;label&gt;Affiliation 1 : &lt;/label&gt;' +
         '&lt;input type="text" name="author' + counter + 'affiliation' +  counter +
         '" id="author' + counter + 'affiliation' +  counter +'" value="" &gt;' + 
      '&lt;input type="button" id="addAffiliation" value="+" &gt;' +
      '&lt;input type="button" id="removeAffiliation" value="-" &gt;' + '&lt;/div&gt;');
   
   newauthorDiv.appendTo("#AuthorGroup");
   
   
   counter++;
       });
   
       $("#removeAuthor").click(function () {
   if(counter==1){
            alert("No more author to remove");
            return false;
         }   
   
   counter--;
   
          $("#authorDiv" + counter).remove();
   
       });
   
       $("#getButtonValue").click(function () {
   
   var msg = '';
   for(i=1; i&lt;counter; i++){
        msg += "\n Author " + i + " : " + $('#author' + i).val();
   }
         alert(msg);
       });
    });
    
    
    // Affiliation 
    
    $(document).ready(function(){
   
      var counter = 2;
   
      $("#addAffiliation").click(function () {
   
   if(counter&gt;10){
              alert("Only 10 Affiliations allow");
              return false;
   }   
   
   var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);
   
   newTextBoxDiv.after().html('&lt;label&gt; Affiliation '+ counter + ' : &lt;/label&gt;' +
         '&lt;input type="text" name="author1_affiliation' + counter + 
         '" id="author1_affiliation' + counter + '" value="" &gt;');
   
   newTextBoxDiv.appendTo("#AffiliationGroup");
   
   
   counter++;
       });
   
       $("#removeAffiliation").click(function () {
   if(counter==1){
            alert("No more Affiliations to remove");
            return false;
         }   
   
   counter--;
   
          $("#TextBoxDiv" + counter).remove();
   
       });
   
       $("#getButtonValue").click(function () {
   
   var msg = '';
   for(i=1; i&lt;counter; i++){
        msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
   }
         alert(msg);
       });
    });
    
  &lt;/script&gt;
  &lt;/head&gt;&lt;body&gt;
   
  &lt;div id='AuthorGroup'&gt;
  
    &lt;label&gt;&lt;b&gt;Author 1 &lt;/b&gt;&lt;/label&gt; &lt;br&gt;
          &lt;label&gt;Name : &lt;/label&gt;&lt;input type='author' id='author1_name1' &gt;
         
          &lt;div id='AffiliationGroup'&gt;
     &lt;label&gt;Affiliation 1 : &lt;/label&gt;&lt;input type='textbox' id='author1_affiliation1' &gt; 
          &lt;input type='button' value='+' id='addAffiliation'&gt;
          &lt;input type='button' value='-' id='removeAffiliation'&gt;
          &lt;!--&lt;input type='button' value='Get TextBox Value' id='getButtonValue'&gt;--&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
  &lt;input type='button' value='Add Author' id='addAuthor'&gt;
  &lt;input type='button' value='Remove Author' id='removeAuthor'&gt;
  &lt;!--&lt;input type='button' value='Get author Value' id='getButtonValue'&gt;--&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>