JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-container">
    <img id='slot1' src="img1.jpg" />
    <img id='slot2' src="img2.jpg" />
    <img id='slot3' src="img3.jpg" />
</div>

JavaScript

var container = document.querySelector('.image-container')
container.addEventListener('click', function(e) {
    if (e.target.tagName === 'IMG') {
        var index = indexInParent(e.target)
        console.log(index)
    }
})

function indexInParent(node) {
    var children = node.parentNode.childNodes;
    var num = 0;
    for (var i = 0; i < children.length; i++) {
        if (children[i] == node) return num;
        if (children[i].nodeType == 1) num++;
    }
    return -1;
}