JSFiddle - React, Tailwind, and code Playground

HTML

<div class="zdivs">
				<div id="d0" class="hidepiece">
					 1.Lorem ipsum dolor sit amet
				</div>
				<div id="d1" class="hidepiece">
					 2. consectetuer adipiscing elit
				</div>
				<div id="d2" class="hidepiece">
					 3. sed diam nonummy nibh euismod tincidunt 
				</div>
				<div id="d3" class="hidepiece">
					 4. laoreet dolore magna aliquam erat volutpat
				</div>
				<div id="d4" class="hidepiece">
				    5. Ut wisi enim ad minim veniam
				</div>
               <div id="d5" class="hidepiece">
					6. Lorem ipsum dolor sit amet
				</div>
				<div id="d6" class="hidepiece">
					 7. consectetuer adipiscing elit
				</div>
				<div id="d7" class="hidepiece">
					8. sed diam nonummy nibh euismod tincidunt 
				</div>
				<div id="d8" class="hidepiece">
					9. laoreet dolore magna aliquam erat volutpat
				</div>
				<div id="d9" class="hidepiece">
					10. Ut wisi enim ad minim veniam
				</div>
		</div>
                    <br/>

        <a class="prev">Prev</a>  &nbsp;
		<a class="next">Next</a>
        <br/>
    <h4>Group1</h4>
        <a class="anc" id="an0">A1</a>
        <a class="anc" id="an1">A2</a>
        <a class="anc" id="an2">A3</a>
		<a class="anc" id="an3">A4</a> 
        <br/>
     <h4>Group2</h4>
        <a class="anc" id="an4">B1</a>
        <a class="anc" id="an5">B2</a>
        <a class="anc" id="an6">B3</a>
        <a class="anc" id="an7">B4</a> <br/>
     <h4>Group3</h4>
		<a class="anc" id="an8">C1</a>
    	<a class="anc" id="an9">C2</a>

CSS

.prev,.next{ background:pink; 
		color:navy;
	}
div{ background:yellow;
	}
a{ background: red;
   color:white;
   }

JavaScript

//-One by one navigation class anc hidepiece-->

    $(document).ready(function() {
    $("div.hidepiece").hide();
    $("a.anc").click(function() {
        var id = $(this).attr("id");
        var divId = id.replace("an", "d");
        $("div.hidepiece").hide();
        $("div#" + divId).fadeIn("slow");
        $("#zdivs").scrollTop(0);//scrolls zdiv to top
      });
    });


// script for previous next -->
  $(document).ready(function(){
    $(".zdivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    
    $(".next").click(function(){
      $("#zdivs").scrollTop(0);
        if ($(".zdivs div:visible").next().length != 0)
            $(".zdivs div:visible").next().fadeIn("slow").prev().hide();
        else {
            $(".zdivs div:visible").hide();
            $(".zdivs div:first").fadeIn("slow");
        }
        return false;
    });

    $(".prev").click(function(){
      $("#zdivs").scrollTop(0);
        if ($(".zdivs div:visible").prev().length != 0)
            $(".zdivs div:visible").prev().fadeIn("slow").next().hide();
        else {
            $(".zdivs div:visible").hide();
            $(".zdivs div:last").fadeIn("slow");
        }
        return false;
      });
    });