使用javascript在表单中添加另一个字段列表

我有一个表单，可以将新用户添加到数据库中。这一切都很完美，但我想要的是能够一次添加多个用户，因此当我单击“添加另一个用户”时，它将显示另一个用于添加用户的字段列表。我不知道该如何解释，因此我将添加一些图片：

以下是我在尝试添加用户时得到的信息：

我想要的是，当我点击“添加另一个用户”时，在另一个下显示另一个字段列表，如下所示：

因此，如果我单击五次，它将显示五个“表单”和原始表单：

我已经用一个不同的例子找到了它显示如何做的地方，但是我的代码有一个表和一个表单，所以我不知道如何做。这是我的表格代码：

<table id="minimalist-table">
    <tr><th>Username</th><th>Password</th><th>Mail</th><th>Language</th><th>Sex</th></tr>
    <form method="post" action="?action=users&sa=add">
    <tr>
    <td><input type="text" name="username[]" required="required"></td>
    <td><input type="password" name="password[]" required="required"></td>
    <td><input type="email" name="email[]" required="required"></td>
    <td><select name="language[]">
    <option value="en_US">English</option>
    <option value="es_ES">Spanish</option>
    </select></td>
    <td><select name="sex[]">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    </select></td>
    </tr>
    <tr><td><input type="submit" value="Submit"> </td></tr>
    </form></table>

用户名密码MailLanguageSex
英语
西班牙的
男性
女性

我有数组的值（比如

name=“email[]”“

），因为这是我处理数据库多个元素的方式

我尝试将所有这些代码放入一个函数中，因此当我调用该函数时，它会在表单中添加另一组字段，但我不知道如何使用JavaScript…

---

谢谢

在这种情况下，我通常会创建一个隐藏的“模板”元素/行，其中包含应添加的HTML：

<table id="minimalist-table">
...
<tr class="template" style="display:none">
... all fields ...
</tr>
<tr class="submit_row"><td><input type="submit" value="Submit"> </td></tr>

完成的代码看起来像这样（未测试）

---

谢谢，@Mohsin！它工作得很好。。。我按照你给我的问题中的步骤做了，没关系！这是你想要的吗？你能接受答案吗？嗯，不完全是。。。我在主要答案中使用了注释的解决方案，效果非常好！

var row_template = $('#minimalist-table > .template').html().find(':input').prop('disabled', true)

var row_template = $('#minimalist-table > .template').html()
$('#add_row').on('click', function(){
    $('#minimalist-table .submit_row').before(row_template);
});