JSFiddle - React, Tailwind, and code Playground

HTML

<span>Hehe</span>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li style="display:none;">4</li>
</ul>
<ul>
    <li>1</li>
    <li style="display:none;">2</li>
    <li style="display:none;">3</li>
    <li>4</li>
</ul>

<ul>
    <li style="display:none;">1</li>
    <li>2</li>
    <li>3</li>
    <li style="display:none;">4</li>
</ul>

<ul>
    <li>1</li>
    <li style="display:none;">2</li>
    <li style="display:none;">3</li>
    <li style="display:none;">4</li>
</ul>

<ul>
    <li>1</li>
    <li style="display:none;">2</li>
    <li>3</li>
    <li style="display:none;">4</li>
</ul>

CSS

ul{ display: none; }

JavaScript

$('ul').each(function() {
    $(this).children('li').each(function(index, elem) {
        if ( $(elem).css('display') === 'block') {
            $(this).html(index);
            var l = $(elem).parent().find('li').filter(function() {
                return $(this).css('display') === 'block';
            }).length;
            if (index == l-1)
                $(this).addClass('last-visible');
        }
    });
});