JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cycle-posts">
    <a id="next" href="#next">next</a>
    <a id="prev" href="#prev">prev</a>
</div>

<div id="container">
<div class="current">My first post</div>
<div>My second post</div>
<div>My third post</div>
<div>My fourth post</div>
    </div>

CSS

.current { color: red; }

JavaScript

(function() { 
  var index = 0;
  $('#container div:first').addClass('current');
  var moveOne = function (forward) {
    var articles = $('#container div');
    articles.eq(index).removeClass('current');
    if (forward) {
      index++;
      if (index === articles.length) {
        index = 0;
      }
    } else { 
      index--;
      if (index < 0) {
        index = articles.length - 1;
      }
    }
    articles.eq(index).addClass('current');
  }

  $('#next').click(function () { moveOne(true); });
  $('#prev').click(function () { moveOne(false); });

})();