JSFiddle - React, Tailwind, and code Playground

HTML

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

CSS

li.active { color:#f00; }
li { float:left; margin: 10px 5px;}
span { float:left; cursor:pointer; margin: 10px 5px; }

JavaScript

$('.prev, .next').on('click', function() {
    if ($(".active")[$(this).attr('class')]().index()!=-1)
    $(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});