JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div class="parentDiv">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <div class="div">4</div>
    <div class="div">7</div>
</div>

<div class="buttons">
    <a idx="1">1</a> 
    <a idx="2">2</a> 
    <a idx="3">3</a> 
    <a idx="4">4</a> 
    <a idx="5">5</a> 
</div>

CSS

a
{
    color: blue;
    cursor:pointer;
}

JavaScript

$('.div').hide();

$('.buttons a:nth-child(1)').show();
$('.parentDiv div:nth-child(1)').show();

var num_of_divs = 5;

$('.buttons a').click(
      function(event)
    {
        var idx = $(event.target).attr('idx');
        var id2 = (parseInt(idx)+1) % num_of_divs;       
        
        $('.buttons a:nth-child('+id2+')').show();        
        $('.div').hide();
        $('.parentDiv div:nth-child('+idx+')').show();
    }
    );