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;
    var fetching = false;
    var done = false;

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

    function filter_data() {

				// prevent concurrent requests
    		if(fetching === true) { return; }
    
    		fetching = true;

        $.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');

    			// append new data
    			if(data !== '<h3>No Data Found</h3>') {
         			//$('.filter_data').html(data); // override
         			$('.filter_data').append(data); // append             
    			}
    			// we reached the end, no more data
    			else {
          
          		if(flag === 0) $('.filter_data').append(data); // display initially "no data found"
        			done = true;
    			}

							flag += 4; // move here. increment only once on success
    					fetching = false; // allow further requests again
          })
        	.fail( function( error ) {

              console.log( 'An error occurred while fetching', error )
            	// TODO: some error handling
        	});
    }


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


    //filter_data(); // commented out for debugging purpose


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

    $window.scroll(function () {

        // RUN when the page is almost at the bottom AND data is NOT completed AND another request is NOT pending
        if ( $window.scrollTop() >= $document.height() - $window.height() -...