JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="squirrelContainer">
    <img src="images/SquirrelFull.jpeg" class="squirrel default" style="background-color: red;">
    <img src="images/SquirrelName.jpeg" class="squirrel" style="background-color: blue;">
    <img src="images/SquirrelEmpty.jpeg" class="squirrel" style="background-color: green;">
</div>

CSS

#squirrelContainer
{
    position: relative;
}

.squirrel
{
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    width: 10px;
    height: 10px;
}

.squirrel.default
{
    display: block;
}

JavaScript

(function($) { 
    $(document).ready(function () {
        $('.squirrel').click(function () {
            $(this).hide();
            var next = $(this).next();
            console.log(next.length);
            if (next.length == 0)
                next = $(this).parent().find('.squirrel').first();
            
            next.show();
        });
    });
})(jQuery);