JSFiddle - React, Tailwind, and code Playground

HTML

<button>remove class</button>

<div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
    <div class="xpto">xpto</div>
</div>

CSS

div > div {
    display:none;
}
div > div.xpto:first-child {
    display: block;
}
.visible {
    display:block;
}

JavaScript

$(function() {
    $('button').on('click', function() {
        $('.xpto:first').removeClass('xpto');
        $('div.visible').removeClass('visible');
        $('div > div.xpto:first').addClass('visible');
    });
});