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="second 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

document.getElementById('next').onclick =  function() {
     var divs = document.getElementsByClassName('second');
     var active = document.getElementsByClassName('active')[0];
 
     for(var i = 0; i < divs.length; i++) {
       if(divs[i]==active) divs[i].className = 'second';
       if(divs[(i)%divs.length] == active) divs[(i+1)%divs.length].className = 'second active';
    }    
}