JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div>
    <ul>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="foo"/></a><!-- "previous" -->
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="bar"/></a>
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="foo"/></a><!-- I'm at this node -->
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="baz"/></a>
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="foo"/></a><!-- "next" 1 -->
      </li>
    </ul>
  </div>
  <div>
    <ul>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="foo"/></a><!-- "next" 2 -->
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="baz"/></a>
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="foo"/></a><!-- "next" 3 -->
      </li>
      <li>
        <a href="#"><img src="http://www.dvorak.org/blog/wp-content/uploads/2009/07/fubar3ql.jpg" class="bar"/></a>
      </li>
    </ul>
  </div>
</div>

CSS

.foo, .bar, .baz
{
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 5px;
}
.foo
{
    border-color: #f00;
}
.bar, .baz
{
    border-color: #000;
}

JavaScript

$(function() {
    var $foo = $('.foo');
    $foo.click(function() {
        // remove clicked identifier from all other foos
        $foo.data('clicked', 'false');
        // set clicked identifier for this foo
        $(this).data('clicked', 'true');
        
        // find the index of this foo out of all the foos, then find the next foo
        var nextFoo = null;
        var i = 0;
        while (i < $foo.length) {
            if ($foo.eq(i).data('clicked') == 'true') {
                // find the next foo after this one
                if (i + 1 < $foo.length) {
                    nextFoo = $foo.eq(i + 1);
                }
                break;
            }
            i++;
        }
        
        // if there is a next foo, do something with it
        if (nextFoo != null) {
            // do something
            nextFoo.attr('src', 'http://cache.gizmodo.com/assets/resources/2006/09/FUBAR%201.jpg');
            nextFoo.css('border', '5px solid #cccc00');
        } else {
            alert('could not find a foo after this one :(');
        }        
    });
});