I want to add same text field by clicking + button but problem is only first + button is working other + button is not working? help needed

I have used jquery code for solving issue but it won’t work.Only first + button is working. if I press first + button then textbox was added in below 2 (+) buttons(i.e beside Annexure II & Annexure III)–>1 image description

After Clicking First (+) Button beside Annexure 1 Sheet, 1 row i.e (starting cell,ending cell,no of headers cell) was added in every sheet(i.e For Annexure II and Annexure III) but I want that it should be added in that sheet only so for example when I click button beside Annexure II only new row inside Annexure II were added it should not reflect inside all the sheets –> 2 image description

<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

Your code is inside loop so its assigning same id to every buttons and we cannot use same id for mutliple elements . Instead change id to class .Then , use $(this).closest(".inc") to target only inc div where button has been clicked

Demo Code :

//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>