JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="foo">
    <li class="other">Beef Jerky</li>
    <li>Smoked Salmon</li>
    <li class="other">Rocky Mountain Oysters</li>
    <li class="other">Beef Jerky</li>
    <li>Smoked Salmon</li>
    <li class="other">Rocky Mountain Oysters</li>
</ul>
<h1 id="log">index of collection: waiting ...</h1>
<h1 id="log2">index of matched collection: waiting ...</h1>

CSS

body {
    font-family: helvetica, arial;
}

ul#foo li {
    background: #f0f0f0;
    border: solid 1px #ccc;
    padding: 0.5em 1em;
    cursor: pointer;
}

h1 {
    margin-top: 10px;
    background: #000;
    color: #fff;
    font-family: monospace;
    padding: 1em
}

h1 + h1 {
    margin-top: 0;
}

JavaScript

var log = $('log');
var log2 = $('log2');

var els = $$('li');
els.addEvent('click',function(){
    log.set('text', 'index of collection: ' + els.indexOf(this));
    log2.set('text', 'index of matched collection: ' + $$('li.other').indexOf(this));
console.log(this);

});