JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<div class="container">
    <p id="p6" data-index="1">one</p>
    <p id="p7" data-index="2">two</p>
    <p id="p8" data-index="3">three</p>
</div>
<div class="container">
    <p id="p1" data-index="1">one</p>
    <p id="p2" data-index="2">two</p>
    <p id="p3" data-index="3">three</p>
    <p id="p4" data-index="4">four</p>
    <p id="p5" data-index="5">five</p>
</div>

CSS

p {
    border: 1px solid #ccc;
    padding: 5px;
    margin: 2px;
    text-align: center;
    cursor: pointer;
    width: 200px;
}
p:hover {
    border-color: #000;
    color: #f00;
}

JavaScript

var data = {},
    elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
    var index = getIndex(elements[i]);
    elements[i].innerHTML += ' [' + index + ']';
}

function getIndex(node) {
    if (typeof data[node.id] === 'undefined') {
        data[node.id] = node && node.nodeType === 1 ? node.getAttribute('data-index') : -1;
    }

    return data[node.id];
}