JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="bookingBox">
    <div class="sun"></div>
</div>

<div class="bookingBox">
    <div class="sun"></div>
</div>

<div class="bookingBox" style="display:none">
    <div class="sun"></div>
</div>

<div class="bookingBox">
    <div class="sun"></div>
</div>

JavaScript

$.fn.setCount = function(options) {
    var settings = {};

    return this.each(function(idx) {
        settings = $.extend({}, $.fn.setCount.defaults, options);
        $(this).html(function() {
            if (settings.wrapper) {
                var container = document.createElement(settings.wrapper);
                container.innerHTML = idx + 1;
                return container;
            } else {
                return idx + 1;
            }
        });
    });
};
$.fn.setCount.defaults = {
    wrapper: 'span'
};

$("div.bookingBox:visible div.sun").setCount();

/*$.fn.countVisibleBoxes = $.countVisibleBoxes = function() {
        return this.each(function() {
            console.log('hier');
            $.each($.find(".bookingBox:visible .sun"),function(index) {
                index++;
                $(this).html(index); 
            });
        });
};

$('body').countVisibleBoxes();*/