JSFiddle - React, Tailwind, and code Playground

by openbayou

HTML

<button id="next-item">next item</button>
<div class="nav-right">
  <div class="irl-today-item current">item 1</div>
  <div class="irl-today-item">item 2</div>
  <div class="irl-today-item">item 3</div>
  <div class="irl-today-item">item 4</div>
  <div class="irl-today-item">item 5</div>
</div>

CSS

.current {border-left:5px solid green}
.irl-today-item {padding:5px 10px}
.next_slide {border-left:5px solid blue}

JavaScript

$(function(){
    $("#next-item").on("click", function(){
       $('.nav-right').removeClass('.current');
       $('.nav-right').find('.current').next().addClass('current');
    });
});