JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>count div that has display:block </h2>

<div id="DataHolder" style="height: 606px;">

        <div data-size="web_all games" class="port-box size col-sm-3" style="display: none;"><a href="portfolio-marvelous-games">
        	<div class="port-img"><img alt="" src="images/showcase/marvelous-games-thumb.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>Marvelous Games</h4></div></a>
        </div>
        

        <div data-size="web_all dating" class="port-box size col-sm-3" style="display: block;"><a href="portfolio-footprint-of-love">
        	<div class="port-img"><img alt="" src="images/showcase/footprint-of-love-thumb.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>Footprint of Love</h4></div></a>
        </div>


        <div data-size="web_all fashion" class="port-box size col-sm-3" style="display: none;"><a href="portfolio-brazil-weave">
        	<div class="port-img"><img alt="" src="images/showcase/brazil-weave-thumb.jpg"></div>
        	<div class="port-cont text-uppercase"><h4>Brazil Weave</h4></div></a>
        </div>

            <div id="loadmore" class="lnk-btn load-btn"><a>Load More</a></div>
</div>

JavaScript

var countlimit = 8;
var countBoxView = $('div.port-box:visible').length;

if(countlimit > countBoxView) {
alert ( countBoxView );
jQuery('#loadmore').hide();
}