JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<div class='container'>
  <div class="page active">page</div>
  <div class="set">
    <div class="page">- Set page</div>
    <div class="page">- Set page</div>
  </div>
  <div class="page ">page</div>
  <div class="page">page</div>
  <div class="page">page</div>
  <div class="set">
    <div class="page">- Set page</div>
    <div class="page">- Set page</div>
  </div>
  <div class="page">page</div>
  <br>
  <button class='next'>Active next</button>
</div>

CSS

.active{
    background-color: red; 
    color: white;
}

JavaScript

var getActiveIndex = function(){
    var active_index;
    var ind = $('.page').each(function(i){
        if ( $(this).hasClass('active') )
    				active_index = i;
    })
    return active_index;
}

$('body').on('click', '.next', function(){
  var active_page_index=getActiveIndex();
  var new_index = active_page_index+1;
  var next_page = $('.page:eq('+new_index+')');

  $('.page').removeClass('active');

  if(next_page.length)
    next_page.addClass('active');
  else
    $('.page:first').addClass('active');
})