JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<div id="f1">
  <li><strong>conten one</strong></li>
  <li><strong>content two</strong></li>
  <li><strong>content three</strong></li>
  <a href="#" id="f2active" class="btn">next</a>
  </div>
  <div id="f2">
  <li><strong>content four</strong></li>
  <li><strong>content five</strong></li>
  <li><strong>content six</strong></li>
  
  <a href="#" id="f1back" class="btn">back</a>
    <a href="#" id="f3active" class="btn">next</a>

  </div>
 <div id="f3"> <li><strong>content seven</strong></li>
  
  
  <li><strong>content eight</strong></li>
  <li><strong>content nine</strong></li>
  <a href="#" id="f2back" class="btn">back</a>
    <a href="#" id="f4active" class="btn">next</a>
  </div>
  <div id="f4">
  <li><strong>content ten</strong></li>
  <a href="#" id="f3back" class="btn">back</a>
  </div>
</ul>

JavaScript

$(document).ready(function(){
  $("#f2, #f3, #f4").hide();
  
  $("#f2active").click(function(){
  $("#f1").hide();
  $("#f2").show();
  });
  
  $("#f3active").click(function(){
  $("#f2").hide();
  $("#f3").show();
  });
  
  $("#f4active").click(function(){
  $("#f3").hide();
  $("#f4").show();
  });
  
  $("#f1back").click(function(){
  $("#f2").hide();
  $("#f1").show();
  });
  
  $("#f2back").click(function(){
  $("#f3").hide();
  $("#f2").show();
  });
  
  $("#f3back").click(function(){
  $("#f4").hide();
  $("#f3").show();
  });
  
});