JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listings">
    <li id="item-0">asdasd</li>
    <li id="item-1">
        <div>asd</div>
    </li>
    <li id="item-2">asdasdasdasd</li>
</ul>

JavaScript

var ulLength = document.getElementById('listings');
var elements = [].slice.call(ulLength.childNodes);
//[].slice.call() is used to convert array-like objects/collections into an array

function getSiblings() {
    var _s = [];
    elements.forEach(function (i, d) {
        if (i.nodeType === 1) //prevents text nodes to be counted as siblings, text nodes have nodetype = 3
        _s.push(i);
    });

    return _s;
}

function getElmIndex(elm) {
    var _siblings = getSiblings();
    for (var i = 0; i < _siblings.length; i++) {
        if (!(_siblings[i] && _siblings[i] !== elm)) {
            return i;
        }
    }
}

elements.forEach(function (elm, d) {
    elm.addEventListener("click", function (e) {
        var _index = getElmIndex(this);

        alert("Index: " + _index);
    });
});