How to change my add input field where if a new input field pop up a minus show?

Question

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 class="form-group row"> <label for="validationNumber" class="col-2 col-form-label">Contact:</label> <div class="col-4"> <div class="flex" style="margin-bottom:5px;"> <input style="margin-right: 19px;" id="validationNumber" name="phonenumber" type="text" class="form-control" 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 class="invalid-feedback"> Enter a correct PhoneNumber! </div> </div> </div>

Answer 1

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(".remove").toggle(len>0) } else { $(this).closest(".phone").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:</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" pattern="\b\d{8}\b" 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 class="invalid-feedback"> Enter a correct PhoneNumber! </div> </div> </div> </div>