How to load more content, while scrolling page down with jquery ?

HTML PART

<ul class="grid effect-2" id="grid">
<li style="width:100%;">
<div class="col-sm-3 col-md-3 col-xs-12 col-lg-3 pb-4">
<img src="https://www.tutorialshore.com/wp-content/uploads/2016/09/LG-G6-smartphone-150x150.jpg" alt="lg-g6-smartphone" width="150" height="150" class="alignnone size-thumbnail wp-image-128" />
</div ></li>
<li style="width:100%;">
<div class="col-sm-3 col-md-3 col-xs-12 col-lg-3 pb-4">
<img src="https://www.tutorialshore.com/wp-content/uploads/2016/09/LG-G6-smartphone-150x150.jpg" alt="lg-g6-smartphone" width="150" height="150" class="alignnone size-thumbnail wp-image-128" />
</div ></li>
</ul>

Jquery Script

jQuery(window).on('scroll', function(responseTxt, statusTxt, xhr) {
var total_li=jQuery('ul#grid li').length;
if((total_li>0)&&(k>0))
{
var wS = jQuery(this).scrollTop();
var l_total=jQuery('ul#grid li').length*50;
if (wS > l_total){
k=0;
let req_page = 'https://www.tutorialshore.com/api.php?name=newpicture';
let page_ct = counter += 1;
req_page = req_page+'&page_limit='+page_ct;
var content;
jQuery.get(req_page, function(data){
content= data;
k=1;
jQuery('#grid').append(content);

new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
transitionDuration : 0.2,
viewportFactor : 0.2
});
});
}
}
});