JSFiddle - React, Tailwind, and code Playground

HTML

<section id="container">
    <div>shows up 1</div>
    <div style="display:none">doesn't show 2</div>
    <div>shows up 3</div>
    <div style="display:none">doesn't show 4</div>
    <div style="display:none">doesn't show 5</div>
    <div>shows up 6</div>
    <div>shows up 7</div>
    <div>shows up 8</div>
    <div style="display:none">doesn't show 9</div>
    <div>shows up 10</div>
</section>
<p><b>6</b> elements are visible (and should be only ones counted in the var)</p>
<p><b>4</b> elements are hidden</p>
<p>There are <b>10</b> elements total</p>
<h3>Total counted in var: <span id="display"></span></h2>

CSS

body {
    padding: 10px;
    font-family: arial;
}

span {
    color: blue;
}

JavaScript

var mainList = $("#container div");
                 
$("#display").text(mainList.length);