How to add 2 input field from 1 button instead of adding 1 button per input field?

Question

Hello i have my code there where i have

Here is a version that is using clone and delegation

Wrap the set in a container of their own Wrap the containers in a container Check that the user cannot delete the last row Clone the number including the possible error message No need for ID, you can navigate using closest and the name

Now i would like that when the + is press it add to contact name and no instead of double pressing and limit to 5 row how can i do it ?

Example of image i wanted

When the user press the + it add a new input to contact name and contact no and also have a limit of input field to 5 how can i add that ?

As currently i got is i have to manually press the row 1 by 1

const $container = $('#contactContainer')
$(".remove").eq(0).hide()
$container.on('click', ".ar", function(e) {
  const add = $(this).is(".add");
  const $phones = $container.find(".phone");
  const len = $phones.length;
  if (add) {
    const $newPhone = $phones.eq(0).clone(true)
    $newPhone.find("[name=phonenumber]")
      .attr("id", `new_${$phones.length}`)
      .val("");
    $container.append($newPhone);
    $newPhone.find(".add").hide(); // if you only want one plus
    $newPhone.find(".remove").show()
  } else {
    $(this).closest(".phone").remove()
  }

})


const $container1 = $('#contactContainer1')
$(".remove1").eq(0).hide()
$container1.on('click', ".ar", function(e) {
  const add = $(this).is(".add1");
  const $phones = $container1.find(".phone1");
  const len = $phones.length;
  if (add) {
    const $newPhone = $phones.eq(0).clone(true)
    $newPhone.find("[name=phonenumber1]")
      .attr("id", `new_${$phones.length}`)
      .val("");
    $container1.append($newPhone);
    $newPhone.find(".add1").hide(); // if you only want one plus
    $newPhone.find(".remove1").show()
  } else {
    $(this).closest(".phone1").remove()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-group row">
  <label class="col-2 col-form-label">Contact Name:</label>
  <div class="col-4" id="contactContainer">
    <div class="flex phone" style="margin-bottom:5px;">
      <input style="margin-right: 19px;" name="phonenumber" type="text" class="form-control" required>
      <span class="ar add"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus">+</i></label></span>
      <span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="minus">-</i></label></span>
    </div>
  </div>
</div>
<div class="form-group row">
  <label class="col-2 col-form-label">Contact No:</label>
  <div class="col-4" id="contactContainer1">
    <div class="flex phone1" style="margin-bottom:5px;">
      <input style="margin-right: 19px;" pattern="\b\d{8}\b" name="phonenumber1" type="text" class="form-control" required>
      <span class="ar add1"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus">+</i></label></span>
      <span class="ar remove1"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="minus">-</i></label></span>
    </div>
  </div>
</div>

Elijah Ciali Elijah Ciali · Accepted Answer · 2022-01-04T03:13:59

According to your code, $newPhone is just a clone of $phones.eq(0). If you wanted multiple copies of this, you can just create a for loop and make $newPhone a local variable in it. You might want to try:

if (add) {
  for (let i=0;i<5;i++)
    const $newPhone = $phones.eq(0).clone(true)
    $newPhone.find("[name=phonenumber]")
      .attr("id", `new_${$phones.length}`)
      .val("");
    $container.append($newPhone);
    $newPhone.find(".add").hide(); // if you only want one plus
    $newPhone.find(".remove").show()
  }
} else {
    $(this).closest(".phone").remove()
}

How to add 2 input field from 1 button instead of adding 1 button per input field?

1 Answers