How do I show one of the divs sequentially when the page is refreshed?

How do I show one of the divs sequentially when the page is refreshed? for example, div 1 will appear when the page is opened, and when the page is refreshed, div 2 will change to 3 – 4 -5 on the next refresh, and when the queue is finished, it will return to the beginning.

example i’m working on :

     <style>
            .category {
                display: none;
            }
        </style>
        <div class="category">1</div>
        <div class="category">2</div>
        <div class="category">3</div>
        <div class="category">4</div>
        <div class="category">5</div>
    <script>
     $(document).ready(function () {
                let divs = document.querySelectorAll(".category");
                console.log(divs.length);
                for (let index = 0; index < divs.length; index++) {
                    $(divs[index]).show()
                }
            });
</script>

but here it shows all when the page is loaded. How can I solve this?