JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div class="case active notactive ">April</div>
<div class="case notactive">May</div>
<div class="case notactive">June</div>
<div class="case notactive">July</div>
<div class="case notactive">August</div>
<div class="case notactive">September</div>
<div class="case notactive">October</div>
<div class="case notactive">November</div>

CSS

.active {display: block !important; background: yellow; border: 1px solid }
.notactive {display: none;}

JavaScript

$(document).ready(function(){
  $('#next').click(function(){
    if ($('.active').next('.case').length) {
        $('.active').removeClass('active')
                    .next('.case')
                    .addClass('active');
    }
  });
  $('#prev').click(function(){
    if ($('.active').prev('.case').length) {
        $('.active').removeClass('active')
                    .prev('.case')
                    .addClass('active');
    }
  });
});