Как сделать появление блоков по 4 штуки?

Question

makssshow @makssshow

Как сделать появление блоков по 4 штуки?

как давать style="display:block" 4 блокам. В мобильной версии открыты первые 6 блоков, как по нажатию на кнопку добавлять по 4 блока, а когда они кончатся, убрать кнопку?

<div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-01.png" alt="project"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-02.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-03.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-04.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-05.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-06.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-07.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-08.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-09.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-10.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-11.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-12.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-13.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
                <div class="portfol">
                    <div><a href="##"><img src="img/progects/photo-14.png" alt="portfolio"></a></div>
                    <div class="textPortf">Website</div>
                </div>
 <div class="PortfButt"><a>load more projects</a></div>

.portfol:nth-child(-n+6) {
                display: block;
            }

$(".PortfButt").click(function () {
            var portfol = $(".portfol");
            var i = 5;
            if (i <= portfol.length) {
               for (let a = i+4; a >= i; a--) {
                   console.log(i ,a);
                   $(portfol[a]).css("display", "block");
               }
           }
           else {
               $('.PortfButt').remove;
           }
        });