title: Dynamic field with users input
body: <p>All I want is to take input from user for number of fields he requires and add fields.
  When I give direct value to the variable the fields are adding perfectly
  but when I'm trying to take the input and give that input to the variable its failing to do so.</p>
  
  <p>Please help and sorry if the question is not well added.</p>
  
  <p>Here is the source code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;html&gt;  
        &lt;head&gt;  
             &lt;title&gt;User Homepage&lt;/title&gt;  
             &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;  
             &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;  
             &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;  
  
        &lt;/head&gt;  
        &lt;body&gt;  
            
             &lt;div class="container"&gt;  
                  &lt;br /&gt;  
                  &lt;br /&gt; 
                  &lt;h2 align="center"&gt;Personal Details&lt;/h2&gt;
                  &lt;div class="form-group"&gt;
                      &lt;form name="add_name" id="add_name"&gt;  
                      &lt;div class="table-responsive"&gt;
                          &lt;table class="table table-bordered"&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Name&lt;/th&gt;
                                  &lt;td&gt;&lt;input type="text" name="f_name" placeholder="Enter your FName" class="form-control name_list"&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" name="l_name" placeholder="Enter your LName" class="form-control name_list"&lt;/td&gt;
                                  
                                      
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Unique ID&lt;/th&gt;
                                  &lt;td&gt;&lt;input type="text" name="u_name" placeholder="Employee ID" class="form-control name_list"&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;h2 align="center"&gt;Research and development's&lt;/h2&gt;  
                  
                  &lt;div class="form-group "&gt;  
                       &lt;form name="add_name" id="add_name"&gt;  
                            &lt;div class="table-responsive"&gt;  
                                 &lt;table class="table table-bordered" id="dynamic_field"&gt;  
                                     &lt;tr&gt;  
                                         &lt;th&gt;Conference Name&lt;/th&gt;
                                         &lt;th&gt;Conference location&lt;/th&gt;
                                         &lt;th&gt;Paper title&lt;/th&gt;
                                         &lt;th&gt;Author Details&lt;/th&gt;
                                         &lt;th&gt;Proceeding no&lt;/th&gt;
                                         &lt;th&gt;Month and year&lt;/th&gt;
                                     &lt;/tr&gt;
                                           &lt;td&gt;&lt;input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list"&lt;/td&gt;
                                           &lt;td&gt;&lt;input type="text" name="Conference_location[]" placeholder="Enter your lName" class="form-control name_list"&lt;/td&gt;
                                           &lt;td&gt;&lt;input type="text" name="Paper_title[]" placeholder="Enter your lName" class="form-control name_list"&lt;/td&gt;
                                           &lt;td&gt;&lt;input type="text" name="Author_Details[]" placeholder="Enter your lName" class="form-control name_list"&lt;/td&gt;
                                           &lt;td&gt;&lt;input type="text" name="Proceeding_No[]" placeholder="Enter your lName" class="form-control name_list"&lt;/td&gt;
                                           &lt;td&gt;&lt;input type="text" name="MonthnYear[]" placeholder="Enter your lName" class="form-control name_list"&lt;/td&gt;
                                           
                                           &lt;td&gt;&lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Add More&lt;/button&gt;&lt;/td&gt;  
                                           &lt;input type="text" id="user"&gt;
                                           
                                           
                                       
                                 &lt;/table&gt;  
                                 &lt;input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /&gt;  
                                 &lt;input type="button" name="view" id="view" class="btn btn-info" value="view" onclick="document.location.href='Viewtrails.php'" /&gt; 
                            &lt;/div&gt;  
                       &lt;/form&gt;  
                  &lt;/div&gt;  
             &lt;/div&gt;  
        &lt;/body&gt;  
   &lt;/html&gt;  
  &lt;script&gt;
      
   $(document).ready(function(){  
        var i=1;
        
        var n=document.getElementById("user");#comment if i give the value here as 10 il get the required fields but not able to get the value from user
        for ($i=0;$i&lt;n;$i++)
          {
        $('#add').click(function(){  
             i++;  
             $('#dynamic_field').append('&lt;tr id="row'+i+'"&gt;\n\
     &lt;td&gt;&lt;input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list" /&gt;&lt;/td&gt;\n\
     &lt;td&gt;&lt;input type="text" name="Conference_location[]" placeholder="Enter your FName" class="form-control name_list" /&gt;&lt;/td&gt;\n\
     &lt;td&gt;&lt;input type="text" name="Paper_title[]" placeholder="Enter your LName" class="form-control name_list" /&gt;&lt;/td&gt;\n\
     &lt;td&gt;&lt;input type="text" name="Author_Details[]" placeholder="Enter your LName" class="form-control name_list" /&gt;&lt;/td&gt;\n\
     &lt;td&gt;&lt;input type="text" name="Proceeding_No[]" placeholder="Enter your LName" class="form-control name_list" /&gt;\n\
     &lt;td&gt;&lt;input type="text" name="MonthnYear[]" placeholder="Enter your FName" class="form-control name_list" /&gt;&lt;/td&gt;\n\
     &lt;td&gt;&lt;button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');  
  });  
        $(document).on('click', '.btn_remove', function(){  
             var button_id = $(this).attr("id");   
             $('#row'+button_id+'').remove();  
        });  
        $('#submit').click(function(){            
             $.ajax({  
                  url:"name.php",  
                  method:"POST",  
                  data:$('#add_name').serialize(),  
                  success:function(data)  
                  {  
                       alert(data);  
                       $('#add_name')[0].reset();  
                  }  
             });  
        });  
   }
   });  
   &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>