JSFiddle - React, Tailwind, and code Playground

HTML

<div id="subMain">
    <div id="archivesResult_Content">
    <div id="archivesResult_title">
    <div class="box">
    <div class="date"></div>
        <div class="categorie" cat="14">Cat 14</div>
        <div class="categorie" cat="13">Cat 13</div>
        <div class="categorie" cat="16">Cat 16</div>
        <div class="categorie" cat="17">Cat 17</div>
    </div>
    <div class="box">
    <div class="date"></div>
        <div class="categorie" cat="3">Cat 3</div>
        <div class="categorie" cat="13">Cat 13 bis</div>
        <div class="categorie" cat="11">Cat 11</div>
    </div>
    <div class="box">
    <div class="date"></div>
        <div class="categorie" cat="2">Cat 2</div>
    </div>
    <div class="box">
    <div class="date"></div>
        <div class="categorie" cat="2">Cat 2bis</div>
        <div class="categorie" cat="3">Cat 3bis</div>
    </div>
    </div>
    </div>

JavaScript

// To define the total of div categorie
    var nbreDiv=$("#subMain").find(".categorie").length;
    
if(nbreDiv>5){
   
        // Hide all div except the 5
        $("div .categorie").not('div .categorie:lt(5)').parent().hide();
        
        // Display button
        $("div.box:visible").after('<div class="button" name="button">see the other posts</div>');
   
         // Action if click on the div button
        $(".button").click(function(){
            
                // Delete the button
                $(".button").remove();
        
                // Display other div
                $("div .box").next('div .box').show();
    
                // Create a button after the 5 first
                $("div.box:visible").after('<div class="button" name="button">see the other posts</div>');           
        });
}