title: Generate dynamic input fields based on selection
body: <p>I need a form that should have a selection to select no of Member. Based on number the user select number of table row generated for input. 
  At this moment i have the following one.. which has selection ....but max four row field is defined. User only select the no of member and then fill the form. 
  I want that user at first select no of member. for example user selects 2 ...then 2 row will generate to fill up . </p>
  
  <pre><code> &lt;div class="form-group"&gt;
        &lt;label&gt;
          No Of Members: &lt;select name="member" class="form-control" required&gt;
            &lt;option value="0"&gt;Select&lt;/option&gt;
           &lt;option value="1"&gt;1&lt;/option&gt;
           &lt;option value="2"&gt;2&lt;/option&gt;
           &lt;option value="3"&gt;3&lt;/option&gt;
            &lt;option value="4"&gt;4&lt;/option&gt;
  
  
         &lt;/select&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
   &lt;div&gt;           
            &lt;table class="table table-bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr class="active"&gt;
                          &lt;th&gt;Student ID&lt;/th&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Email &lt;/th&gt;
                          &lt;th&gt;CGPA&lt;/th&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                        &lt;tr&gt;
                          &lt;td&gt;&lt;input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID" required&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="name" class="form-control" id="" placeholder="Enter Name" required&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="email" class="form-control" id="" placeholder="Enter Email" required&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA" required&gt;&lt;/td&gt;
                      &lt;tr/&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="name" class="form-control" id="" placeholder="Enter Name"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="email" class="form-control" id="" placeholder="Enter Email"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"&gt;&lt;/td&gt;
                      &lt;tr/&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="name" class="form-control" id="" placeholder="Enter Name"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="email" class="form-control" id="" placeholder="Enter Email"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"&gt;&lt;/td&gt;
                      &lt;tr/&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="name" class="form-control" id="" placeholder="Enter Name"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="email" class="form-control" id="" placeholder="Enter Email"&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"&gt;&lt;/td&gt;
                      &lt;tr/&gt;
  
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I have found similar solution in JSFiddle [ <a href="http://jsfiddle.net/sushanth009/H3z5P/" rel="nofollow">http://jsfiddle.net/sushanth009/H3z5P/</a> ] . 
  But it has a problem ....every time i input a number ....it adds that number of rows with previous. and it has not selection. </p>