How to generate unique ids on a repeated function?

Question

I have the following function called twice:

function (data) {
   $.each(data.items, function(i,item) {    
                  var $items = $('<div class="col-sm-4 grid-item"><div class="thumbnail"><input type="checkbox" name="thing_'+i+'" value="valuable" id="thing_'+i+'"/><label for="thing_'+i+'"><img class="img-responsive" src="' + item.link + '"></label></div></div>');`enter code here`

It generates checkboxes and I am generating the identifier name for and id with the i, giving me:

thing_1
thing_2
thing_3

The problem is that when I run the function the second time, the i starts again, resulting in duplicated ids and name and for

Do they each need to have a unique identifiers? That is a little bit of an anti-pattern in most cases. A better alternative is to give all the elements the same structure and use DOM traversal to find the relevant elements as needed. — Rory McCrossan, Jan 07 '17 at 21:52
well yeah they should all have a unique identifier as they are checkboxes — rob.m, Jan 07 '17 at 21:53
if i remove for and name and id they won't check as checkboxes and not be valid — rob.m, Jan 07 '17 at 21:55
check the code in the question, there is an image replacing the chekcboxes — rob.m, Jan 07 '17 at 21:56
There is now you edited it in ;) Either way, you really don't need unique attributes and you can still wrap the input in a label without affecting the image - see this example: https://jsfiddle.net/rytcz9e2/ — Rory McCrossan, Jan 07 '17 at 21:57
yeah there was at first then i removed it to make the code shorter for SO but then you commented so I put it again :) — rob.m, Jan 07 '17 at 21:58

Andreas Louv · Accepted Answer · 2017-01-07T22:21:17.710

Use an IIFE:

var uniqueId = (function() {
  var counter = 0;

  return function(prefix) {
    counter++;
    return prefix ? prefix + '' + counter : counter;
  }
})();

console.log(uniqueId()); // 1
console.log(uniqueId()); // 2
console.log(uniqueId('thing_')); // thing_3
console.log(uniqueId('thing_')); // thing_4

You would integrate it in your code like this:

function (data) {
  $.each(data.items, function(i, item) {
    var uniq = uniqueId('thing_');
    var $items = $('<div class="col-sm-4 grid-item">'.concat(
      '<div class="thumbnail">',
      '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />',
      '<label for="', uniq, '">',
        '<img class="img-responsive" src="' + item.link + '">',
      '</label>',
    '</div>',
  '</div>'));

I broke your huge HTML mess on multiply lines using String.prototype.concat

could you elaborate it to reflect the code in the question? – rob.m Jan 07 '17 at 22:17 — rob.m, Jan 07 '17 at 22:17

How to generate unique ids on a repeated function?

1 Answers1