JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="visible">AAAAAAAA</li>
    <li>BAAAAAAA</li>
    <li>CAAAAAAA</li>
    <li>DAAAAAAA</li>
    <li>EAAAAAAA</li>
</ul>
<button>Bla</button>

CSS

ul {
    counter-reset: test;
    listy-style-type: none;
    /*border: solid;*/
}

li {
    counter-increment: test;
    visibility: hidden;
}

.visible {
    visibility: visible;
}
.visible:before {
    color: red; /*Test pour vérifier que le sélecteur est pris en compte*/
    content: counter(test);
}

JavaScript

$('button').click(function() {
    var visible = $('.visible'),
        next = visible.next();

    visible.removeClass('visible')

    if (next.length === 0) {
        next = $('li').eq(0)
    }
    
    next.addClass('visible')
})