jQuery clone () добавляется к нескольким элементам вместо одного

Question

Я хочу создать клонируемые поля формы, которые будут помещены в div. Я могу клонировать элемент, но проблема в том, что если у меня есть несколько групп схожих полей, это добавление полей ко всем другим группам независимо, а не только к группе для кнопки, которую я нажал.

Как я могу клонировать поля только для текущего $(this) элемента, а не для других?

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event) {
  $(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');

});

.gs-customer-field-box {
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel {
  color: red;
  cursor: pointer;
}

.btnAdd {
  color: green;
  cursor: pointer;
}

.active {
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr/>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>

Answer 1

Проблема связана с вызовом .appendTo('.gs-customer-form-group'). Это добавляет клонированный контент в каждый .gs-customer-form-group элемент. Вам нужно добавить только тот, который связан с нажатием span. У вас уже есть ссылка на этот элемент из siblings(), поэтому вы можете поместить ее в переменную для последующего использования:

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event) {
  let $group = $(this).parent().siblings('.gs-customer-form-group');
  $group.children().last().clone().appendTo($group);
});

.gs-customer-field-box {
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel {
  color: red;
  cursor: pointer;
}

.btnAdd {
  color: green;
  cursor: pointer;
}

.active {
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr/>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>

Answer 2

Вы можете сделать это так:

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event){
  $(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));

});

.gs-customer-field-box{
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group{
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel{
  color: red;
  cursor: pointer;
}

.btnAdd{
  color: green;
  cursor: pointer;
}
.active{
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr />

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>