JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
   <li class="active">list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button>Click</button>

CSS

.active{background-color:red;}

JavaScript

$(document).ready(function() {

    $("button").click(function() {
      
        if ($('ul li:last').hasClass('active')) {
            $('ul li:last').removeClass('active')
            $('ul li:first').addClass('active')
            } else {
            $('.active').removeClass('active').next('li').addClass('active')
            }
    });


});