JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <ul>
        <li>
            <div class="first">
                <div class="second">Test</div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="active">Test1</div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="second">Test2</div>
            </div>
        </li>
    </ul>

    <a href="#" id="next">Next</a>
</div>

CSS

.active {
    background:Red;
}

JavaScript

var $firstSecond = $('.second').eq(0);

$('#next').click(function (){
    var $active = $('.active');
    var $nextSecond = $active.closest('li').next().find('.second');
    
    $active.toggleClass('active second');
        
    if($nextSecond.size() != 0)
        $nextSecond.toggleClass('second active');
    else
        $firstSecond.toggleClass('second active');
});