我想通过单击 + 按钮添加相同的文本字段，但问题是只有第一个 + 按钮工作其他 + 按钮不工作？需要帮助

Question

我已经使用 jquery 代码来解决问题，但它不起作用。只有第一个 + 按钮有效。如果我先按 + 按钮，则在下面的 2 个 (+) 按钮中添加文本框（即在附件 II 和附件 III 旁边）-->1 个图像描述

单击附件 1 表旁边的第一个 (+) 按钮后，在每张表中添加了 1 行，即（起始单元格、结束单元格、没有标题单元格）（即附件 II 和附件 III），但我希望它应该仅在该工作表中添加，例如，当我单击附件 II 旁边的按钮时，仅在附件 II 内添加了新行，它不应反映在所有工作表中 --> 2 图像描述

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function () {
        $("#append").click( function(e) {
          e.preventDefault();
          $(".inc").append('<div class="controls">\
                <input class="form-control" type="text" name="textbox" placeholder="Starting cell" style="width: 190px;">\
                <input class="form-control" type="text" name="textbox" placeholder="Ending cell" style="width: 190px;">\
                <input class="form-control" type="text" name="textbox" placeholder="No. of Headers" style="width: 190px;">\
                <button style="margin-left: 50px" class="remove_this btn btn-danger" type="submit" id="append" name="append">x</button>\
                <br>\
                <br>\
                </div>');
          return false;
        });

    jQuery(document).on('click', '.remove_this', function() {
        jQuery(this).parent().remove();
        return false;
        });
    $("input[type=submit]").click(function(e) {
      e.preventDefault();
      $(this).next("[name=textbox]")
      .val(
        $.map($(".inc :text"), function(el) {
          return el.value
        }).join(",\n")
      )
    })
  });
</script>

<! --name value was coming from res.render(__dirname+'/checkhtml.html',{names:sheet_name_list});-->
  <div class="form-group row">    
    <div id="experienceSection">
      <% names.forEach(function(name) { %>
        <br>
      <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20">
        Enter Table Configuration for @ <h4> <%= name %> </h4> Sheet
        <span class="form-required">
          *
        </span>
      </label>
      <div class="inc">
        <div class="controls">
            <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width: 190px;" placeholder="Starting Cell"/> 
            <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width: 190px;" placeholder="Ending Cell"/>
            <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width: 190px;" placeholder="No. of Headers"/>
            <button style="margin-left: 50px" type="button" id="append" name="append">+</button>
            <br>
            <br>
        </div>
      </div>
      <% }); %>
    </div>
  </div>
  

Answer 1

您的代码在循环内，因此它为每个按钮分配相同的 id，我们不能对多个元素使用相同的 id。而是将 id 更改为 class 。然后，使用 $(this).closest(".inc") 仅针对已单击按钮的 inc div

演示代码：

//change to class
$(".append").click(function(e) {
  var name = $(this).closest(".inc").prev().find("h4").text().trim();
  console.log(name)
  e.preventDefault();
  //use closest..here 
  $(this).closest(".inc").append(`<div class="controls">\
                <input class="form-control" type="text" name="${name}" placeholder="Starting cell" style="width: 190px;">\
                <input class="form-control" type="text" name="${name}" placeholder="Ending cell" style="width: 190px;">\
                <input class="form-control" type="text" name="${name}" placeholder="No. of Headers" style="width: 190px;">\
                <button style="margin-left: 50px" class="remove_this btn btn-danger" type="button" name="append">x</button>\
                <br>\
                <br>\
                </div>`);
  return false;
});

jQuery(document).on('click', '.remove_this', function() {
  jQuery(this).parent().remove();
  return false;
});

.inc {
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-group row">
  <div id="experienceSection">


    <br>
    <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20">
        Enter Table Configuration for @ <h4> Abc </h4> Sheet
        <span class="form-required">
          *
        </span>
      </label>
    <div class="inc">
      <div class="controls">
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Starting Cell" />
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Ending Cell" />
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="No. of Headers" />
        <!--use class-->
        <button style="margin-left: 50px" type="button" class="append" name="append">+</button>
        <br>
        <br>
      </div>
    </div>
    <br>
    <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20">
        Enter Table Configuration for @ <h4> Xyz </h4> Sheet
        <span class="form-required">
          *
        </span>
      </label>
    <div class="inc">
      <div class="controls">
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Starting Cell" />
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Ending Cell" />
        <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="No. of Headers" />
        <button style="margin-left: 50px" type="button" class="append" name="append">+</button>
        <br>
        <br>
      </div>
    </div>
  </div>