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

var $curr = $( ".active" );
  
  $( ".prev" ).click(function() {
   
    if ($($curr).is(':first-child')){
      $('.prev').hide();
    }else{
      $curr = $curr.prev();
      $( "div" ).removeClass('active');
      $curr.addClass('active');

    }
  });


  $( ".next" ).click(function() {
   
    if ($($curr).is(':last-child')){
      $('.next').hide();
    }else{
      $curr = $curr.next();
      $( "div" ).removeClass('active');
      $curr.addClass('active');

    }
  });