JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="kunder">
<li><span class="udtalelse">Indhold 1</span></li>
<li><span class="udtalelse">Indhold 2</span></li>
<li><span class="udtalelse">Indhold 3</span></li>
</ul>
<span class="kunderpagination">
<a href="#" id="prev">« Previous</a> |
<a href="#" id="next">Next »</a>
</span>

CSS

ul{
            list-style-type: none;
        }
        .active{
            display: inline;
        }    
        .passiv{
            display: none;    
        }

JavaScript

$('.udtalelse').addClass("passiv");
            ctrlKunder(0);
            
            $('#prev').click(function(){
                var index = getActive();
                if(index == 0)return;
                index--;
                ctrlKunder(index);
            })    
            $('#next').click(function(){
                var index = getActive();
                if(index == $('.udtalelse').length - 1)return;
                index++;
                ctrlKunder(index);
            })
            function ctrlKunder(ele){
                $('.udtalelse').removeClass("active").addClass("passiv");
                $('.udtalelse').eq(ele).removeClass("passiv").addClass("active");
            }
            
            function getActive(){
                var index;
                $('.udtalelse').each(function(i){
                    if($(this).hasClass("active"))index = i;
                })
                return index;
            }