JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>infinite loader</h2>
    <div id="scrollbox">
        <div id="page_1" class="pagina">box 1</div>
        <div id="page_2" class="pagina">box 1</div>
        <div id="page_3" class="pagina">box 1</div>
        <div id="page_4" class="pagina">box 1</div>
        
        <div id="page_1" class="pagina">EXTRA</div>
        <div id="page_2" class="pagina">box 2</div>
        <div id="page_3" class="pagina">box 2</div>
        <div id="page_4" class="pagina">box 2</div>
  
        <div id="page_1" class="pagina">EXTRA</div>
        <div id="page_2" class="pagina">box 3</div>
        <div id="page_3" class="pagina">box 3</div>
        <div id="page_4" class="pagina">box 3</div>

    </div>
<div class="clickme">clickme</div>

CSS

.pagina:nth-child(4) ~ .pagina {
    display:none;    
}
.yahantak{
    color:orange;    
}

.pagina {
    border: 1px solid #ccc;
    float: left;
    margin: 20px;
    min-height: 100px;
    width: 40%;
}

JavaScript

$(".clickme").click(function () {
    
    $(".pagina").css("display", "block");
    //$( ".pagina:nth-child(4n+4)" ).css( "color", "red" );
    $( ".pagina:nth-of-type(4)" ).addClass( "yahantak" );
    $( ".pagina:nth-of-type(4)" ).removeClass( "yahantak" );
    $( ".pagina:nth-of-type(8)" ).addClass( "yahantak" );
});