JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    ...
    <div>
        <ul>
            <li>
                <a href="..."><img class="foo"/></a><!-- "previous" -->
            </li>
            <li>
                <a href="..."><img class="bar"/></a>
            </li>
            <li>
                <a href="..."><img class="foo"/></a><!-- I'm at this node -->
            </li>
            <li>
                <a href="..."><img class="baz"/></a>
            </li>
            <li>
                <a href="..."><img class="foo"/></a><!-- "next" 1 -->
            </li>
        </ul>
    </div>
    ...
    <div>
        <ul>
            <li>
                <a href="..."><img class="foo"/></a><!-- "next" 2 -->
            </li>
            <li>
                <a href="..."><img class="baz"/></a>
            </li>
            <li>
                <a href="..."><img class="foo"/></a><!-- "next" 3 -->
            </li>
            <li>
                <a href="..."><img class="bar"/></a>
            </li>
        </ul>
    </div>
</div>

CSS

.foo {
    width: 30px;
    height: 30px;
    background: blue;
}

JavaScript

$('.foo').click(function() {
    var $foo = $('img.foo');
    var idx = $foo.index(this);

    var next = $foo.eq(idx + 1);
    
    next.css('border','2px solid orange');
    return false;
});