title: How to add dynamic number of rows on click?
body: <p>I have my markup like this</p>
  
  <pre><code>    &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" data-id="3"&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-id="2"&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-id="5"&gt;5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-id="7"&gt;7&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;table id="data"&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" name="name" class="name"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="email" class="email"&gt;&lt;/td&gt;
      &lt;/tr&gt;   
      &lt;/table&gt;
  </code></pre>
  
  <p>Now I want that when I will make click on the a tag which data-id is 3 it should add 3 rows to the table. If I make click on another a tag with <code>data-id</code> 7 then it should add 7 rows to the table. The first row will be the same for each new action. I mean </p>
  
  <pre><code>&lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>will be constant for the table the rest rows will be added with Name and Email input fields. For that I have made my jQuery like this</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('table#data tr:last').hide();
          $('body').on('click', 'li a', function(event) {
              var Parent = $('table#data tr:last');
              event.preventDefault();
              var Number = $(this).attr('data-id');
              console.log(Number);
              for ( i=0; i&lt;Number; i++ ) {
                  $(Parent).insertAfter(Parent);
              }
          });
      })
  
      &lt;/script&gt;
  </code></pre>
  
  <p>But its not working. I have created the fiddle for <a href="http://jsfiddle.net/NewUserFiddle/dgkup38d/" rel="nofollow">this</a>. So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable. Thanks</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I want that when I click on 7 it should add 7 rows so only 7 rows will be seen.But when I again click on 2 rows it should only show 2 rows and so on.</p>