Set unique Id for element

[sooryacse]

@all. Hi. I'm trying to set unique id for all element both default first and upcoming element. but i can't do this. anyone help me.

[shehwar007]

any one help me???

[RJonwal]

HI, I'm facing the same issue with a form. I need to create unique Ids for the form elements in repeater js

[Salah3id]

I offer the following solution, although it may not be the most optimal. I have used it and found it to be helpful, and I hope it is of assistance to you.

The solution below is to create unique IDs for the form elements in jQuery Repeater by adding data-repeater-INPUTNAME='0'. By using the show method provided by jQuery Repeater and the biggestInputValue()function, you can ensure that all of the input elements in the repeater have unique IDs, even if any input is deleted.

HTML

<input class="form-check-input" 
       name="is_verified"
       type="checkbox" 
       value="" 
       data-repeater-verified='0' 
       id="is_verified_0" />

<label class="form-check-label" for="is_verified_0">
    Verified
</label>

JS

$('#your_repeater_ele').repeater({
  //...
  show: function () {
          var verified = $('input[data-repeater-verified]'),
              thisVerified = $(this).find('input[data-repeater-verified]'),
              verifiedID = parseInt(biggestInputValue(verified,'verified')) + 1;

          thisVerified.attr('id', thisVerified.attr('name')+'_' + verifiedID);
          thisVerified.next().attr('for', thisVerified.attr('name')+'_' + verifiedID);
          thisVerified.attr('data-repeater-verified', verifiedID);

  }

  // ...
  });

The biggestInputValue() function takes an array of input elements and the name of the attribute data-repeater-NAME to check as input and returns the biggest value for the attribute. In this solution, the biggestInputValue() function is used to generate a unique ID from the biggest value for the verified input attribute.
verifiedID = parseInt(biggestInputValue(verified,'verified')) + 1;

function biggestInputValue(inputElements,name) {
  const biggestInputValue = inputElements.map(function(index, input) {
    const inputValue = $(input).attr('data-repeater-'+name);

    if (isNaN(inputValue)) {
      return 0;
    }

    return inputValue;
  }).get().reduce((biggest, inputValue) => {
    if (inputValue > biggest) {
      return inputValue;
    }

    return biggest;
  }, 0);

  return biggestInputValue;
}

[Salah3id]

I offer the following solution, although it may not be the most optimal. I have used it and found it to be helpful, and I hope it is of assistance to you.

The solution below is to create unique IDs for the form elements in jQuery Repeater by adding data-repeater-INPUTNAME='0'. By using the show method provided by jQuery Repeater and the biggestInputValue()function, you can ensure that all of the input elements in the repeater have unique IDs, even if any input is deleted.

HTML

<input class="form-check-input" 
       name="is_verified"
       type="checkbox" 
       value="" 
       data-repeater-verified='0' 
       id="is_verified_0" />

<label class="form-check-label" for="is_verified_0">
    Verified
</label>

JS

$('#your_repeater_ele').repeater({
  //...
  show: function () {
          var verified = $('input[data-repeater-verified]'),
              thisVerified = $(this).find('input[data-repeater-verified]'),
              verifiedID = parseInt(biggestInputValue(verified,'verified')) + 1;

          thisVerified.attr('id', thisVerified.attr('name')+'_' + verifiedID);
          thisVerified.next().attr('for', thisVerified.attr('name')+'_' + verifiedID);
          thisVerified.attr('data-repeater-verified', verifiedID);

  }

  // ...
  });

The biggestInputValue() function takes an array of input elements and the name of the attribute data-repeater-NAME to check as input and returns the biggest value for the attribute. In this solution, the biggestInputValue() function is used to generate a unique ID from the biggest value for the verified input attribute.
verifiedID = parseInt(biggestInputValue(verified,'verified')) + 1;

function biggestInputValue(inputElements,name) {
  const biggestInputValue = inputElements.map(function(index, input) {
    const inputValue = $(input).attr('data-repeater-'+name);

    if (isNaN(inputValue)) {
      return 0;
    }

    return inputValue;
  }).get().reduce((biggest, inputValue) => {
    if (inputValue > biggest) {
      return inputValue;
    }

    return biggest;
  }, 0);

  return biggestInputValue;
}