i would like help for some improvement i would like to change the structure of my html this is the image below

I would like that when user press the plus a new input box however the right side there is a minus instead and if press minus the input box be gone Example of image below

currently what i have is on my code is just like this

So how can i change it to be like the example of the image?

$('.add').on('click', add);
$('.remove').on('click', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val())   1;
  var new_input = "<div style='margin-bottom:5px;'><input type='text' id='new_"   new_chq_no   "'pattern='^[0-9]{8}$' class='form-control col-9' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";

  $('#new_chq').append(new_input);

  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();

  if (last_chq_no > 1) {

    $('#new_'   last_chq_no).remove();
    $('#total_chq').val(last_chq_no - 1);

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <label for="validationNumber" >Contact:</label>
  <div >
    <div  style="margin-bottom:5px;">
      <input style="margin-right: 19px;" id="validationNumber" name="phonenumber" type="text"  pattern="\b\d{8}\b" required>
      <a onclick="add()"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus"> </i></label></a>
      <a onclick="remove()"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="minus">-</i></label></a>
    </div>
    <div id="new_chq"> </div>
    <input type="hidden" value="1" id="total_chq">

    <div >
      Enter a correct PhoneNumber!
    </div>
  </div>
</div>

CodePudding user response：

Here is a version that is using clone and delegation

1. Wrap the set in a container of their own
2. Wrap the containers in a container
3. Check that the user cannot delete the last row
4. Clone the number including the possible error message

No need for ID, you can navigate using closest and the name

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()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <label >Contact:</label>
  <div  id="contactContainer">
    <div  style="margin-bottom:5px;">
      <input style="margin-right: 19px;" name="phonenumber" type="text"  pattern="\b\d{8}\b" required>
      <span ><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus"> </i></label></span>
      <span ><label style="cursor: pointer; padding-top: 5px;"><i data-feather="minus">-</i></label></span>
      <div >
        Enter a correct PhoneNumber!
      </div>
    </div>
  </div>
</div>