JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lessonThree">
<a class="prev" href="#">Prev</a>
<a class="next" href="#">Next</a>

    <ul>
        <li>Ferrari</li>
        <li>Lamborghini</li>
        <li>Aston Martin</li>
        <li>Fiat</li>
        <li>Saab</li>
        <li>Harley Davidson</li>
        <li>Triumph</li>
        <li>Zonda</li>
        <li>Bugatti</li>
        <li>Suzuki</li>
    </ul>
    </div>

CSS

.active {
   color: #ff0000;
}

JavaScript

$("a.next").click(function(){
            var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('#lessonThree li').first();
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        });

        $("a.prev").click(function(){
            var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('#lessonThree li').last();
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        });