I am working on a project where I've to show data using **Next** and **Previous** button clicked accordingly. My requirement is something like this: (By default, data will be loaded from database and will be rendered as follows)

    1
    1.1

Clicking on next button, it should render the following and vice-versa:

    2
    2.1
    2.2

I did few researches and got one that worked perfectly but unfortunately it didn't work as expected because it simply works on individual div as below:

1. 1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   2. <script>
   3.  $(document).ready(function(){
              $(".divs div").each(function(e) {
                  if (e != 0)
                      $(this).hide();
              });
             
               $("#prev").click(function(){
                  if ($(".divs div:visible").prev().length != 0)
                      $(".divs div:visible").prev().show().next().hide();
                  else {
                      $(".divs div:visible").hide();
                      $(".divs div:last").show();
                  }
                  return false;
              });
             
              $("#next").click(function(){
                  if ($(".divs div:visible").next().length != 0)
                      $(".divs div:visible").next().show().prev().hide();
                  else {
                      $(".divs div:visible").hide();
                      $(".divs div:first").show();
                  }
                  return false;
              });
          });
      
   4. </script>
          <div class="divs">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
              <div>10</div>
          </div>
      
          <a id="prev">Previous</a>
          <a id="next">Next</a>
      

Pretty cool! But when I tried mine one with few tweaks, it started showing weird results. Here is the code snippet:

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
2. <script>
3.     $(document).ready(function () {
               $(".divs .heading .heading2").each(function (e) {
                   if (e != 0)
                       $(this).hide();
               });
   
               $("#prev").click(function () {
                   if ($(".divs .heading:visible").prev().length != 0)
                       $(".divs .heading:visible").prev().show().next().hide();
                   else {
                       $(".divs .heading:visible").hide();
                       $(".divs .heading:last").show();
                   }
                   return false;
               });
   
               $("#next").click(function () {
                   if ($(".divs .heading:visible").next().length != 0) {
                       $(".divs .heading:visible").next().show().prev().hide();
                       $(".divs .heading2:visible").next().show().prev().hide();
                   }
                   else {
                       $(".divs .heading:visible").hide();
                       $(".divs .heading:first").show();
   
                       $(".divs .heading2:visible").hide();
                       $(".divs .heading2:first").show();
                   }
                   return false;
               });
           });
   
4. </script>
       <div class="divs">
           <div class="heading">
               <div>1</div>
           </div>
   
           <div class="heading2">
               <div>1.1</div>
           </div>
   
           <div class="heading">
               <div>2</div>
           </div>
   
           <div class="heading2">
               <div>2.1</div>
           </div>
           <div class="heading2">
               <div>2.2</div>
           </div>
   
           <div class="heading">
               <div>3</div>
           </div>
   
           <div class="heading2">
               <div>3.1</div>
           </div>
           <div class="heading2">
               <div>3.2</div>
           </div>
           <div class="heading2">
               <div>3.3</div>
           </div>
       </div>
   
       <a id="prev">Previous</a>
       <a id="next">Next</a>
   

I am sure missed few things out here and would appreciate if pointed out the reason though am struggling a bit with it.

N:B: The purpose of this is to use a quiz system where user can go forward or backward with the given features. So initially data has to be loaded from database and this will work on the loaded data respectively. I would expect any better approach or open to any better idea for this. Again, you can see the working code snippet here - jQuery With Previous and Next Button