JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div01" class="slide active">Slide One</div>
<div id="div02" class="slide">Slide Two</div>
<div id="div03" class="slide">Slide Three</div>
<div id="div04" class="slide">Slide Four</div>
<div class="btm-box">
    <button  id="preview" class="change-div">Prev</button>
    <button  id="next" class="change-div">Next</button>
</div>

CSS

.slide{
    display:none;
}
.active{
    display:block;
}

JavaScript

$(function(){
          $('#next').on('click',function() {
              var a = $('.active').attr('id');
                 
              if (a == "div04"){
                  $('.active').removeClass('active');
                  $("#div01").addClass('active');
              }
              else{
 $('.active').removeClass('active').next().addClass('active');
              }
        });

        $('#preview').on('click',function() {
            var a = $('.active').attr('id');
             if (a == "div01"){
                  $('.active').removeClass('active');
                  $("#div04").addClass('active');
             }
              else{    $('.active').removeClass('active').prev().addClass('active');
              }
        });
});