JSFiddle - React, Tailwind, and code Playground

HTML

<div id='selection_1' >1<div>selection_1</div></div>

<div id='selection_2' style='display:none'>2<div>selection_2</div></div>

<div id='selection_3' style='display:none'>3<div>selection_3</div></div>

<div id='selection_4' style='display:none'>4<div>selection_4</div></div>
<div id='selection_5' style='display:none'>5<div>selection_5</div></div>
<div id='selection_6' style='display:none'>6<div>selection_6</div></div>

<div id='selection_7' style='display:none'>7<div>selection_7</div></div>

<button  id="next" type='button'>Next</button>

CSS

div[id^=sel]{
    background: #3d9a44;
   height: 50px; 
    width: 180px;
 border: 2px solid grey;
}

div[id^=sel]>div{
     background: white;
    height:30px;
}

JavaScript

$(function(){
    $('#selection_2,#selection_3,#selection_4,#selection_5,#selection_6,#selection_7').hide();
    var current = 1;
    $('div[id^="sel"] div').hide();
    $('#selection_1 div').slideDown();
    $("#next").click(function () {
        current++;
        $('#selection_'+(current-1)+' div').slideUp();
        if(current ==8){
            current = 1;
        }
        $('#selection_'+current+' div').slideDown();
        
    });
});