JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div id="foo-0"></div>

CSS

div {
    height: 20px;
    width: 100px;
    margin: 4px;
    border: 1px solid blue;
}

div:after {
    content: "id: " attr(id);
}

JavaScript

function generateId(prefix) {
    var id;
    
    if (!generateId.counter) {
        generateId.counter = 0;
    }

    id = prefix + '-' + generateId.counter;
    
    while (document.getElementById(id)) {
        generateId.counter++;
        id = prefix + '-' + generateId.counter
    }

    return id;
}

var i = 0,
    id, div;

for (; i < 10; i += 1) {
    div = document.createElement('div');
    id = generateId('foo');
    div.id = id;
    document.body.appendChild(div);
}