JSFiddle - React, Tailwind, and code Playground

HTML

<a class="foo"></a>
    <div>
      <span class="foo" id="1"></span>
      <ul>
        <li class="foo" id="2"></li>
      </ul>
      <em class="foo" id="3"></em>
    </div>
    <div class="foo" id="4"> </div>

CSS

.foo {
    display: block;
    background: #666;
    border: 1px solid #eee;
    width: 50px;
    height: 50px;
}

JavaScript

var all_foos = $('.foo');
var get_next_foo = function(foo){
    for (var i=0; i<all_foos.length; ++i) {
        if (all_foos[i] == foo) {
            return all_foos[(i+1) % all_foos.length];
        }
    }
}

$(".foo").click(function() {
    var text = "Clicked on a: ";
    text += $(this)[0].tagName;

    $('.foo').css('background', '#666');
    var next = get_next_foo(this);
    $(next).css('background', '#f00');

    text += "; Next is a: ";
    text += next.id;

    text += "<br/>";
    $("body").append(text);
});