JSFiddle - React, Tailwind, and code Playground

by ufomammut66

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

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            if(i-1 >= 0){
                li.removeClass('active');
                li.eq(i-1).addClass('active');
            }
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            if(i+1 < li.length){
                li.removeClass('active');
    
                li.eq(i+1).addClass('active');
                return false;
            }
        }
    });
});