JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div class='active'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>
    <button class='prev'>Go to Prev</button>
</p>
<p>
    <button class='next'>Go to next</button>
</p>

CSS

div {
     width: 40px;
     height: 40px;
     margin: 10px;
     float: left;
     border: 2px blue solid;
     padding: 2px;
 }
 span {
     font-size: 14px;
 }
 p {
     clear: left;
     margin: 10px;
 }
 .active {
     background-color: red;
 }

JavaScript

$(".prev").click(function () {
    var $active = $('.active').removeClass('active');
    var $prev = $active.prev('div');
    if ($prev.length == 0)
           $prev = $active.siblings('div').last();
    $prev.addClass('active');
});


$(".next").click(function () {
    var $active = $('.active').removeClass('active');
    var $next = $active.next('div');
    if ($next.length == 0)
           $next = $active.siblings('div').first();
    $next.addClass('active');
});