Javascript 使用可选id和名称在PHP表单中生成其他行

我正在寻找一种使用按钮添加以下输入行的方法（我发现了很多示例），但大多数方法都重命名了html元素的名称（例如name='price1'，name='price2'），但我的javascript引用了元素的id，这使得添加新行时出现错误。一些帮助是值得感激的

只是为了看行而拉小提琴

HTML代码

<form action = "" method = "POST">

<label>Item : </label>

<select id = 'item_name' name = 'item_name' onChange = 'listMatch(this);fieldCheck();' 

>
    <option value = "" disabled = "disabled" selected="selected">Please Select</option>
        <?php
            while($row = mysqli_fetch_assoc($result)){
                echo "<option value = '".$row['PRODUCT_ID']."' data-price ='
                ".$row['UNIT_PRICE']."' >".$row['PRODUCT_NAME']."</option>";    
            }
        ?>
</select>

<label>Price : </label>
<input type = 'text' id = 'item_price' name = 'item_price' value = '' disabled/>

<label>Quantity : </label>
<input type = "number" id = 'quantity' name = 'quantity' max = "150" min = "0" onChange = 'multiplier(value)' disabled/>

<label>Sub-Total : </label>
<input type = "number" id = 'sub-total' name = 'sub-total' disabled value = ''/>

---

正如您所知，

id

必须是唯一的，向克隆的表单元素添加数字以保持id的唯一性似乎有些过头了。
但是名称不必是唯一的，因此可以使用具有相同名称的元素的不同形式。并且可以通过其名称轻松访问：

<form name="form_1">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>
<form name="form_2">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>

因此，很容易区分不同的形式，尽管它们的元素具有相同的结构和名称。您只需使用

name=“form_X”

创建一个新表单，并使用

innerHTML

添加克隆的元素

要克隆元素，可以使用

.cloneNode（true）（或jQuery的
clone（）
）

编辑：

您似乎仍然认为需要将所有内容存储在一个变量中，下面是一个示例，您可以看到它比您想象的要简单得多。我给这些表单
class=“contactForm”
以将它们与可能存在的其他表单分开。我们可以克隆10.contactForm，页面中还有100个其他表单

要获取表单数量，可以使用
$（'form.contactForm'）。长度

要清空新表单中的文本输入，可以使用：
newForm.find（'input[type=text]'）.val（“”）

那么，你想用不同id的元素来克隆表单还是什么？是的，我想用不同id来克隆表单，但我也想知道，在这之后，确保我的javascript指向正确id的最佳方法是什么。请注意，我在JS部件中使用的getElementById很有帮助，但该按钮允许用户添加任意数量的新行（根据您的建议，这意味着新表单）。有没有一种方法可以动态跟踪生成了多少表单？仅仅准备几十个var firstName1=document.form_x.firstname似乎并不干净；如我所说，为了预测用户的输入，不管有多少表单，都可以通过
表单本身访问表单。您不需要将每个名字存储在单独的变量中，根本不需要将它们分开。请注意，您总是可以通过jQuery中的
this
（或
$（this）
）获取当前/单击的表单。你不会预料到用户的进入，你只要明白，我建议你再看一遍答案。为了知道生成了多少个表单，我看到您通过使用一个全局变量
count
实现了它。
    //global variable for duplication identification
var count = 1;

//clone form for multiple entries
(function() {
    $('#add').click(function() {
        var source = $('form:first'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        }); 

        clone.insertBefore(this);
        count++;
    });
})();

<form name="form_1">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>
<form name="form_2">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>

var firstName1 = document.form_1.firstName;
var firstName2 = document.form_2.firstName;