Javascript 在几个相似的div中调用div内的函数时访问div内的元素

我正在制作以下表格：

在这里，用户首先单击“添加另一个类别”，这将复制从类别名称到最后一个添加更多按钮的所有内容。假设我们单击了一次按钮，现在有两个类别块。现在，用户可以在两个块中输入详细信息。点击“添加更多”按钮，表格应显示该类别块中的另一行项目、数量和价格输入。因此，它仅适用于第一个类别块

对于第二个类别块，如果我在其中单击“添加更多”，则它不会增加第二个类别块的项目、数量和价格输入，而是始终增加第一个类别块的项目、数量和价格输入

以下是我的html代码：

<div class="row">
  <div class="input-field col s12">
      <label>Menu</label>
      <br><br>
  </div>
  <div class="col s12" id="category">
      <div class="row" id="categoryContent">
          <div class="col s12">
              <h6>Categry name: </h6>
              <input type="text" name="category[]">
          </div>
          <div class="col s12"><h6>Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="veg">
                      <tr id="vegContent">
                          <td>
                              <input type="text" name="vitem[][]">
                          </td>
                          <td>
                              <input type="text" name="vquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="vprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addVeg()" type="button">Add More</button>
          </div>
          <div class="col s12"><h6>Non-Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="nonVeg">
                      <tr id="nonVegContent">
                          <td>
                              <input type="text" name="nitem[][]">
                          </td>
                          <td>
                              <input type="text" name="nquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="nprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addNonVeg()" type="button">
                  Add More
              </button>
          </div>
      </div>
  </div>
  <div class="col s12" style="text-align: center">
      <button class="btn waves-effect waves-light" onclick="addCategory()" type="button">
          Add Another Category
      </button>
  </div>
</div>

---

我希望点击“添加更多”按钮时，只能增加该块内的输入行。

您可以通过公共类访问元素（您可以向每个元素添加类），如

或

可以按如下方式向每个元素添加不同的值：

$('.itemname').each(function() {
    var currentElement = $(this);
    var value = currentElement.val(); 
});

<input type="text" name="nitem[][]" id="Item1">
<input type="text" name="nitem[][]" id="Item2">

---

首先您需要克隆所有元素，然后您可以将其附加到另一个div，我在您提供的代码中做了一些更正，现在它对我有效

`

---

`

您不明白，我做了一些更正（在克隆元素中添加了一些div）。请看一看，希望这可能会有所帮助，这已经是我正在做的事情了，伙计。。。我不想要这个但是。。。我希望输入仅附加在类别块上。。。在您的代码中，仅为第1个类别块添加。在一个文档中，不同的代码段具有相同的id，这不是一个好的做法。请尝试为它们提供不同的id。还可以传递一个参数“this”来检查按钮所在的按钮位置，这将帮助您获取其父元素，从而将vegContent添加到该位置特定元素。

$('.itemname').each(function() {
    var currentElement = $(this);
    var value = currentElement.val(); 
});

<input type="text" name="nitem[][]" id="Item1">
<input type="text" name="nitem[][]" id="Item2">

$('#Item1').val();

function addCategory(){
      $('#category').clone().appendTo('#categoryContent');
}
function addVeg(){
    //$("#veg").append($("#vegContent").clone());
    $('#veg').clone().appendTo('#vegContent');
};

function addNonVeg(){
    $('#nonVeg').clone().appendTo('#nonVegContent');
};