JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box"></div>
</div>

CSS

#container { width: 440px; }
.box { display: inline-block; width: 190px; height: 190px; margin: 5px; background: blue; }
.red { background: red; }

JavaScript

$(document).ready(function(){
    addElements = function(){
        var docBottom = $(document).height();
        var winBottom = $(window).height() + $(window).scrollTop();
        var scrollTrigger = $(window).height() * 0.00;

        if ((docBottom - scrollTrigger) <= winBottom) {
            $("#container").append("<div class='box red'></div>");
            console.log("added more");
        }
    };
    
    $(window).bind('scroll', addElements);
       
    while ($(document).height() <= $(window).height()){
        addElements();
    }
});