title: wordpress add data to the table with new rows generated
body: <p>In wordpress I have a form like this</p>
  
  <pre><code>&lt;form id="data-form" action=""&gt;
      &lt;table id="user-data"&gt;
          &lt;tr&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;Email&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="email"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;button type="submit" value="submit" name="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So when I am doing click on submit button it is inserting data to the table like this</p>
  
  <pre><code>global $wpdb;
  if ( isset($_POST['submit']) ) {
    $wpdb-&gt;insert(
      'fl_user_data', 
      array(
        'id' =&gt; '',
        'name' =&gt; $_POST['name'],
        'email' =&gt; $_POST['email'])
    );
    echo 'success';
  }
  </code></pre>
  
  <p>and it is doing insert the values to the database. Now I have used a button inside the form called as add row. So the button adds the row to the table. Now  when I click the button it adds a row to the table like this</p>
  
  <pre><code>&lt;a href="#" id="add-row"&gt;+Add Row&lt;/a&gt;
  &lt;script&gt;
    $('body').on('click', '#add-row', function(e) {
      var Html = $('&lt;tr&gt;&lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="email"&gt;&lt;/td&gt;&lt;/tr&gt;');
      $('table#user-data').append(Html);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>This one is adding a row when I click the add row button. So when after all the fields have been filled with the new rows and I click on submit button
      then it is inserting only one row values. So can someone tell me how to insert the rows of data in the database table 
      in rows. Any help and suggestions will be really appreciable. Thanks</p>