JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="body_next">
  <section class="section_next">
    <p>blah1</p>
    <p>blah1</p>
    <p>blah1</p>
  </section>
  <section class="section_next">
    <p>blah2</p>
    <p>blah2</p>
    <p>blah2</p>
  </section>
</div>
<div class="body_next">
  <section class="section_next">
    <p>blah1</p>
    <p>blah1</p>
    <p>blah1</p>
  </section>
  <section class="section_next">
    <p>blah2</p>
    <p>blah2</p>
    <p>blah2</p>
  </section>
  <section class="section_next">
    <p>blah3</p>
    <p>blah3</p>
    <p>blah3</p>
  </section>
</div>

CSS

p {
  margin: 0;
  padding: 0;
}

JavaScript

$(function() {

  /* add next/previous buttons to all class body_next */
  $(".body_next").append('<button type="button" class="next">Next &#62;</button>');
  $(".body_next").append('<button type="button" class="prev" disabled>&#60; Previous</button>');

  var collBodyNext = $('.body_next');

  collBodyNext.each(function() {

    // Current 'body next' item
    var curBodyNext = $(this),

      // Total sections within current 'body next'
      totalSections = $('.section_next', curBodyNext).length,

      // Tracker
      tracker = 1;

    /* hide all section_next except the first */
    $(".section_next:not(:first)", curBodyNext).hide();

    $(".next", curBodyNext).click(function() {
      // Current element
      var curElement = $(this);

      // Get related 'body next' section
      var bodyNext = curElement.closest('.body_next');

      $(".section_next:visible", bodyNext).next(".section_next:hidden").show().prev(".section_next:visible").hide();

      tracker++;

      /* show previous button if displayed section is not the first one */
      if (tracker > 1) {
        $(".prev",  bodyNext).prop('disabled', false);;
      }

      /* hide next button if displayed section is the last one */
      if (tracker === totalSections) {
        $(".next",  bodyNext).prop('disabled', true);;
      }
      else{
      	$(".next",  bodyNext).prop('disabled', false);;
      }
      
    });

    $(".prev", curBodyNext).click(function() {
    
      // Current element
      var curElement = $(this);

      // Get related 'body next' section
      var bodyNext = curElement.closest('.body_next');
      
      $(".section_next:visible", bodyNext).prev(".section_next:hidden").show().next(".section_next:visible").hide();

      tracker = tracker - 1;

      /* show next button if displayed section is not the first one */
      if (tracker >= 1) {
        $(".next",  bodyNext).prop('disabled', false);;
      }

      /* hide previous button if displayed section is the first...