JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body style="min-height: 100%;">
    <p>Scroll should be triggered, because scroll height > window height. If it is not, please resize your window height, so you need to scroll.</p>
    <div class="container">Placeholder 1</div>
    <div class="container">Placeholder 2</div>
    <div class="container">Placeholder 3</div>
    <div class="container">Placeholder 4</div>
    <div class="container">Placeholder 5</div>
    <div class="container">Placeholder 6</div>
</body>
</html>

CSS

.container {
  height:400px;
}

.container:nth-child(even) {
  background-color: lightblue;
}

JavaScript

$(document).ready(function () {
    var flag = 0;

    function get_filter(class_name) {
        var filter = [];
        $('.' + class_name + ':checked').each(function () {
            filter.push($(this).val());
        });
        return filter;
    }

    function filter_data() {

        $.post( "fetch.php", {
            action  : 'fetch_data',
            cate    : get_filter('cate'),
            brand   : get_filter('brand'),
            model   : get_filter('model'),
            sort    : get_filter('sort'),
            date    : get_filter('date'),
            offset  : flag,
            limit   : 4
        } )
        .done( function (data) {

            console.log('data received');

            /**
             * TODO: do you want to override the existing data or append the new data?
             */
            //$('.filter_data').html(data); // override
            $('.filter_data').append(data); // append
        })
        .fail( function( error ) {

            console.log( 'An error occurred while fetching', error )
        });
    }


    $('.filter_all').click(function () {
        filter_data();
    });


    filter_data();


    var $window = $( window );
    var $document = $( document );

    $window.scroll(function () {

        // RUN when the page is almost at the bottom
        if ( ( window.innerHeight + window.scrollY ) >= document.body.offsetHeight - 300 ) {
        //if ( $window.scrollTop() >= $document.height() - $window.height() - 300 ) {

            console.log('infinite scroll');
            alert('infinite scroll')

            flag += 4; // AUTO IN INCREMENT
            filter_data();
        }
    });
});