JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" name="button" id="next" value="next..." />
<div class="content" id="1">content 1</div>
<div class="content" id="2">content 2</div>
<div class="content" id="3">content 3</div>
<div class="content" id="4">content 4</div>
<div class="content" id="5">content 5</div>
<div class="content" id="6">content 6</div>
<div class="content" id="7">content 7</div>
<div class="content" id="8">content 8</div>
<div class="content" id="9">content 9</div>

CSS

:root {
    display: block;
}
.content {
    margin-top: 5px;
    padding: 5px;
    background-color: #ddd;
}
.hidden {
    display: none;
}

JavaScript

$(function () {

    $(".content:not(:has(.hidden))").addClass("hidden");
    var counter = 0;

    $('#next').click(function () {
        
        $("#"+counter).addClass("hidden");
        var next = counter + 1;
        $("#"+next).removeClass("hidden");
        counter++;
        if (counter == 10) counter = 0;
    });
});