JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<button id="prev" disabled="disabled">Prev</button>
    <button id="next">Next</button>
    <hr /> 

<div id="main">   
    <div id="div1" class="first current">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div> 
    <div id="div4">Div 4</div> 
    <div id="div5" class="last">Div 5</div> 
</div>

CSS

#div2,#div3,#div4,#div5{
    display:none;
}

JavaScript

$('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});