How I can maintain the sequence of beneficiaries generated with jquery?

Question

I'm developing a Will generating web application. For this I need to develop a system which allow the user to add multiple beneficiaries. I have written some code which is working for creation on new beneficiary but the issue is when a user deletes a beneficiary the sequence number doesn't work accordingly.

For example, User added 5 beneficiaries and he deletes the 3rd beneficiary the sequence number doesn't change. i.e. beneficiary 1, beneficiary 2, beneficiary 4, beneficiary 5. I want to sort this problem make them in sequence.

For my code please check this

https://jsfiddle.net/shahzadwaris/purvo4bn/5/

$(document).delegate(".delBeneficiary", "click", function(e) {
  e.preventDefault();
  var div = $(this).attr("id");
  var nmbr = div.replace(/\D/g, "");
  $("." + div).remove();
  bene--;

  //alert(nmbr);
});
var bene = 2;
$(".addBeneficiary").click(function(e) {
  e.preventDefault();
  addBeneficiary(bene);
  bene++;
});
$(document).delegate(".addBeneficiaryD", "click", function(e) {
  e.preventDefault();
  addBeneficiary(bene);
  bene++;
});

function addBeneficiary(bene) {
  $("#beneficiaries").append(
    "<div class = 'bene" +
    bene +
    "'><h6 class = 'mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>" +
    bene +
    "</span></b></h6>" +
    "<div class='form-group row'>" +
    "<label for='ename' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>" +
    "<div class='col-sm-7'>" +
    " <input type='text' class='form-control p-1 mt-1' id='ename' name = 'ebname[]' placeholder='Name'>" +
    "</div>" +
    "<label for='enric' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>" +
    "<div class='col-sm-7'>" +
    "<input type='text' class='form-control p-1 mt-1' id='enric' name = 'ebnric[]' placeholder='NRIC / Passport No'>" +
    "</div> " +
    "<label for='relationship' class='col-sm-4 col-form-label backgroundForm pt-2 pb-2'><span class = 'pt-5'>Relationship</span></label>" +
    "<div class='col-sm-7'>" +
    "<input type='text' class='form-control p-1 mt-1' id='Rrelationship' name = 'ebrelationship[]' placeholder='Relationship'>" +
    "</div>" +
    "<div class = 'col-xs-12 col-sm-12 col-md-11 mt-2  text-right'>" +
    "<button class = 'btn btn-sm addBeneficiaryD ' id = 'bene" +
    bene +
    "' >Add</button>" +
    "<button class = 'btn btn-sm delBeneficiary ml-2' id = 'bene" +
    bene +
    "'>Delete</button>" +
    "</div>" +
    "</div></div>"
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
<div class="form-group row">

  <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
  </div>
  <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
  </div>
  <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
  <div class="col-sm-7">
    <input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
  </div>
  <div class='col-xs-12 col-sm-10 col-md-8 mt-2  text-right'>
    <button class='btn btn-sm addBeneficiary '>Add</button>
  </div>
</div>
<div id='beneficiaries'>
</div>

Please be careful, adding elements with same ID over and over again is not good, as for `id='enric'` or `id='bene'`... — skobaljic, Sep 17 '19 at 08:01
Is it really important to have consecutive sequence numbers ? Those data will have to be saved in a database anyway, and then they'll get a unique id at the db level... — bruno desthuilliers, Sep 17 '19 at 08:06
Yes with this user will get an idea he/she added all his/her beneficiaries. — Shahzad Waris, Sep 17 '19 at 08:09

mplungjan · Accepted Answer · 2019-09-17T08:53:08.897

0

You can start here

Much simpler code and removed the deprecated delegate

function renum() {
  $(".beneficiary").each(function() {
    $(this).find(".bNmbr").text($(this).index()+1)
  })
}
$(".delBeneficiary").eq(0).hide()
$(document).on("click", ".delBeneficiary ", function(e) {
  e.preventDefault();
  $(this).closest(".beneficiary").remove();
  renum();
});
$(document).on("click", ".addBeneficiary", function(e) {
  e.preventDefault();
  const beneCount = $(".beneficiary").length;
  let $bene = $(this).closest(".beneficiary").clone();
  $bene.find("input").each(function() { $(this).val("") }); // empty inputs
  $bene.find("[id]").each(function() {
    this.id += beneCount;
  })
  $bene.find(".bNmbr").text(beneCount + 1)
  $bene.appendTo("#beneficiaries")
  $(".delBeneficiary:gt(0)").show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='beneficiaries'>
  <div class="beneficiary">
    <h6 class='mt-3 mb-3'><b>Beneficiary <span class = 'bNmbr'>1</span></b></h6>
    <div class="form-group row">
      <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Name</span><span class = 'text-danger'> *</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
      </div>
      <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>NRIC / Passport No.</span><span class = 'text-danger'> *</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
      </div>
      <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class = 'pt-5'>Relationship</span></label>
      <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="Relationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
      </div>
      <div class='col-xs-12 col-sm-10 col-md-8 mt-2  text-right'>
        <button class='btn btn-sm addBeneficiary '>Add</button>
        <button class='btn btn-sm delBeneficiary ml-2'>Delete</button>
      </div>
    </div>
  </div>
</div>

edited Sep 17 '19 at 08:53

answered Sep 17 '19 at 08:13

mplungjan

169,008
28
173
236

I have already written code similar like your's but the issue was changing DOM data i.e. it clone everything including data inside input so i remove that code. – Shahzad Waris Sep 17 '19 at 08:19
I have added a renumber and reset the content – mplungjan Sep 17 '19 at 08:23
1

yes it is working. thank you so much for your precious time :) – Shahzad Waris Sep 17 '19 at 08:28
How I can implement validation on this by using JQuery validation plugin with just adding `required` attribute? it worked on first content but it doesn't work when i click on add button. It ignore the dynamic content just validate the first one. Again I need your help. – Shahzad Waris Oct 07 '19 at 09:17
You should not need a jquery plugin if you have required. – mplungjan Oct 07 '19 at 09:18
Actually this is a form wizard so – Shahzad Waris Oct 07 '19 at 09:19
So HTML5 required only works if you have a submit button. Your jQuery plugin is more complicated. You need to refresh the validation each time you add a field – mplungjan Oct 07 '19 at 09:49
How I can refresh it? – Shahzad Waris Oct 07 '19 at 10:38
https://stackoverflow.com/questions/11536271/validate-dynamically-added-input-fields – mplungjan Oct 07 '19 at 10:40
In this answer they are changing the name attribute everytime when add button is clicked but in my case i have array it doesn't work on `Array` how i can make it work on array? – Shahzad Waris Oct 07 '19 at 10:57
For example https://stackoverflow.com/questions/24670447/how-to-validate-array-of-inputs-using-validate-plugin-jquery – mplungjan Oct 07 '19 at 11:16

score 0 · Answer 2 · answered Sep 17 '19 at 08:19

0

Try renumbering your entries every time you add or delete:

function renumber() {
    var i = 1;
    $('.bNmbr').each(function(){
        this.innerHTML = i;
        ++i;
    });
}

Can be combined with the code by mplungjan.

answered Sep 17 '19 at 08:19

Adder

5,708
1
28
56

I added the renumber too AND a reset of cloned values – mplungjan Sep 17 '19 at 08:24

score 0 · Answer 3 · answered Sep 17 '19 at 08:34

This would be a complete code for you. I tried to make it easier for editing and removed duplicate ID creations:

var bene = 1;

function correctNumbers() {
    $('.bNmbr').each(function(i) {
        $(this).text(i + 1);
    });
};

$('body').on('click', '.addBeneficiary', function(e) {
    e.preventDefault();
    bene++;
    addBeneficiary(bene);
});

$('body').on('click', '.delBeneficiary', function(e) {
    e.preventDefault();
    $(this).closest('.bene').remove();
    correctNumbers();
});

function addBeneficiary(bene) {
    $("#beneficiaries").append('\
        <div class="bene" id="bene' + bene + '">\
            <h6 class="mt-3 mb-3"><b>Beneficiary <span class="bNmbr">' + bene + '</span></b></h6>\
            <div class="form-group row">\
                <label for="ename' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
                    <span class="pt-5">Name</span>\
                    <span class="text-danger"> *</span>\
                </label>\
                <div class="col-sm-7">\
                    <input type="text" class="form-control p-1 mt-1" id="ename' + bene + '" name="ebname[]" placeholder="Name">\
                </div>\
                <label for="enric' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
                    <span class="pt-5">NRIC / Passport No.</span>\
                    <span class="text-danger"> *</span>\
                </label>\
                <div class="col-sm-7">\
                    <input type="text" class="form-control p-1 mt-1" id="enric' + bene + '" name="ebnric[]" placeholder="NRIC / Passport No">\
                </div>\
                <label for="relationship' + bene + '" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2">\
                    <span class="pt-5">Relationship</span>\
                </label>\
                <div class="col-sm-7">\
                    <input type="text" class="form-control p-1 mt-1" id="relationship' + bene + '" name="ebrelationship[]" placeholder="Relationship">\
                </div>\
                <div class="col-xs-12 col-sm-12 col-md-11 mt-2  text-right">\
                    <button class="btn btn-sm addBeneficiary" id="add' + bene + '">Add</button>\
                    <button class="btn btn-sm delBeneficiary ml-2" id="delete' + bene + '">Delete</button>\
                </div>\
            </div>\
        </div>\
    ');
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h6 class='mt-3 mb-3'><b>Beneficiary <span class='bNmbr'>1</span></b></h6>
<div class="form-group row">
    <label for="ename" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Name</span><span class='text-danger'> *</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="ename" name='ebname[]' placeholder="Name" required='required' />
    </div>
    <label for="enric" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>NRIC / Passport No.</span><span class='text-danger'> *</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="enric" name='ebnric[]' placeholder="NRIC / Passport No" required='required' />
    </div>
    <label for="relationship" class="col-sm-4 col-form-label backgroundForm pt-2 pb-2"><span class='pt-5'>Relationship</span></label>
    <div class="col-sm-7">
        <input type="text" class="form-control p-1 mt-1" id="Rrelationship" name='ebrelationship[]' placeholder="Relationship" required='required' />
    </div>
    <div class='col-xs-12 col-sm-12 col-md-11 mt-2  text-right'>
        <button class='btn btn-sm addBeneficiary '>Add</button>
    </div>
</div>
<div id='beneficiaries'>
</div>

Also on JSFiddle

Please use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) instead of escaping newlines. Or look at my solution for something more elegant than adding html strings — mplungjan, Sep 17 '19 at 08:38
@mplungjan Does IE [support it](https://caniuse.com/#feat=template-literals)? Thanks for the suggestion. — skobaljic, Sep 17 '19 at 08:45
Ah, IE does not support them, so even better to use clone :) Or transpile with Babel — mplungjan, Sep 17 '19 at 08:49
How I can implement validation on this by using JQuery validation plugin with just adding required attribute? it worked on first content but it doesn't work when i click on add button. It ignore the dynamic content just validate the first one. Again I need your help. — Shahzad Waris, Oct 07 '19 at 09:17
Think that question has [answer here](https://stackoverflow.com/questions/25778722/how-to-validate-dynamic-content-using-jquery-validate-plugin)? — skobaljic, Oct 09 '19 at 06:40

How I can maintain the sequence of beneficiaries generated with jquery?

3 Answers3