JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
<li>Number 1 item</li>
<li>Number 2 item</li>
<li>Number 3 item</li>
<li>Number 4 item</li>
</ul>
<br />
<button id="prev">Previous</button>
<button id="next">Next</button>

JavaScript

var list = $("#list");
var li = list.children();
var lengthMinusOne = li.length - 1;
var index = 0;
var num = $("#list li").length;

var prevLi = $(li[0]).css("background-color", "gray");

$("#next").click(function(){
   index++;
   if (index > lengthMinusOne) index = 0;
   prevLi.css("background-color","white");
   prevLi = $(li[index]).css("background-color", "gray");
});
$("#prev").click(function(){
   index--;
   if (index < 0) index = lengthMinusOne;
   prevLi.css("background-color","white");
   prevLi = $(li[index]).css("background-color", "gray");
});