JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JavaScript

/* Should've said before, but ignore this, it's just to generate text-content
   for the 'li' elements, to give something visible to click on */

$('li').each(

function(i) {
    $(this).text('list element ' + i);
});

function indexAmongSameTags(elem) {
    if (!elem || !elem.tagName) {
        return false;
    }
    
    var thisIs = elem.tagName.toLowerCase(),
        sameAs = document.getElementsByTagName(thisIs);
    
    for (var i=0,len=sameAs.length; i<len; i++){
        if (sameAs[i] == elem){
            console.log('You clicked ' + thisIs + ' of index position "' + i + '" among ' + len + ' other ' + thisIs + ' elements');
            return i;
        }
    }
    
}

var elements = document.getElementsByTagName('*');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function(e) {
        e.stopPropagation();
        var indexPosition = indexAmongSameTags(this);
        console.log(indexPosition);
    };
}