JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<div class="container">
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>
<div class="container">
    <p>one</p>
    <p>two</p>
    <p>three</p>
    <p>four</p>
    <p>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 elements = document.getElementsByTagName('p');
for (var i in elements) if (elements.hasOwnProperty(i)) {
    elements[i].onclick = function() {
        alert(index(this));
    }
}

function index(node) {
    var index = 0;
    var siblings = node.parentNode.childNodes;
    for (var j in siblings) if (siblings.hasOwnProperty(j)) {
        if (siblings[j].nodeType != Node.ELEMENT_NODE) {
            continue;
        }
        ++index;
        if (siblings[j] == node) {
            break;
        } 
    }
    return index || -1;
}