JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="posts">
    </div>
</div>

CSS

#main {
    height: 100px; 
    overflow-y : auto;
}

.post {
    display : block;
}

JavaScript

var loadmoore = true;
function gent_sample_data(num_posts){
    var i,
        sample_data = '';
    for(i=0;i<num_posts;i++) {
        sample_data += "<p class'post'>title_select_query_result " + i + "</p>"; 
    }
    return sample_data;
}

function loadFeed(){
     // generate sample data
    var sample_data = gent_sample_data(15);
    $.ajax({
        url : '/echo/html',
        dataType: 'html',
        type: 'post',
        data:sample_data,
        success: function(returnhtml){
            // var $post = $('<div class="havanagila"></div>');
            $("#posts").append(returnhtml); 
            
        }    
    });
}
loadFeed();

$(window).scroll(function () { 
    if (loadmoore && $(window).scrollTop() >= ($(document).height() - $(window).height()-100) ) {
       loadmoore = false;
       loadFeed();
    }
});