JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
</section>

<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
    <div class="item hidden-item">Третий элемент</div>
    <div class="item hidden-item">Четвертый элемент</div>
</section>
        
<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
    <div class="item hidden-item">Третий элемент</div>
    <div class="item hidden-item">Четвертый элемент</div>
</section>

<input type="button" id="showNext" value="Показать по одному элементу в каждой секции"/>

CSS

.hidden-item
{
    display:none;
}

section { width: 170px; float: left; }

JavaScript

var i = 0,
    but = $('#showNext'),
    sect = $('section');
but.click(function(){
    sect.each(function(){
        $(this).children('.item').eq(i).removeClass('hidden-item');
    });
    i++;
});