WordPress добавляет данные в таблицу с новыми сгенерированными строками

В wordpress у меня есть такая форма

<form id="data-form" action="">
    <table id="user-data">
        <tr>
            <td>Name</td>
            <td>Email</td>
        </tr>
        <tr>
            <td><input type="text" name="name"></td>
            <td><input type="text" name="email"></td>
        </tr>
    </table>
    <button type="submit" value="submit" name="submit">Submit</button>
</form>

Поэтому, когда я нажимаю кнопку отправки, он вставляет данные в таблицу, как это

global $wpdb;
if ( isset($_POST['submit']) ) {
  $wpdb->insert(
    'fl_user_data', 
    array(
      'id' => '',
      'name' => $_POST['name'],
      'email' => $_POST['email'])
  );
  echo 'success';
}

и он вставляет значения в базу данных. Теперь я использовал кнопку внутри формы, которая называется «Добавить строку». Таким образом, кнопка добавляет строку в таблицу. Теперь, когда я нажимаю кнопку, он добавляет строку в таблицу, подобную этой

<a href="#" id="add-row">+Add Row</a>
<script>
  $('body').on('click', '#add-row', function(e) {
    var Html = $('<tr><td><input type="text" name="name"></td><td><input type="text" name="email"></td></tr>');
    $('table#user-data').append(Html);
  });
</script>

Этот добавляет строку, когда я нажимаю кнопку добавления строки. Поэтому, когда после того, как все поля были заполнены новыми строками, и я нажимаю кнопку отправки, он вставляет только одно значение строки. Так может кто-нибудь сказать мне, как вставлять строки данных в таблицу базы данных в строках. Любая помощь и предложения будут действительно ценны. Спасибо