JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Item 01</li>
    <li style="display:none">Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
</ul>

<a href="#prev">« Previous</a> | <a href="#next">Next »</a>

CSS

.selected {font-weight:bold;}

JavaScript

$(document).ready(function () {
    
    $('li:first').addClass('selected');
    $('a').click(function(){
        var action = $(this).attr('href');
        if(action == '#next') {
            $('.selected').removeClass('selected').next('li:visible').addClass('selected');
        }
        if(action == '#prev') {
            $('.selected').removeClass('selected').prev(':visible').addClass('selected');
        }
    });
    
});