Infinite scroll : Sequencing post with Ajax and php

I’m trying to infinite scroll my page using ajax php and jquery.
I have pasted the jquery code doe reference. I’m trying to get post in sequence using jquery and php. My jquery code sends the counta to the php script. php script then returns the result according to the number it receives. I’m trying to get the post in sequence so that they don’t repeat. I get the post when the user reaches the bottom of the page.

Any other answers then this are also welcomed. But I just want to use the core of jquery meaning without inclusion of any external library.

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


    $(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() > $(document).height() - 2000) {            
    //  console.log("Here");

    $.ajax({            
                            type: 'post',
                            url: 'extendost.php',               
                            data: '&articles='+counta,              
                            success: function (data) {                                  
                            alert(counta);
                            $("#morepost").append(data);                                                    
                            counta++;
                            },
                            error: function (data) {                            
                            alert(data);                                
                            },
          });

   }
}); 

This is what I would do:

<div id="start">0</div>
<div class="post_content"></div>

$(window).data('ajaxready', true).scroll(function(e) {
    var postHeight = $('#post_content').height();
    if ($(window).data('ajaxready') == false) return;
        var start = parseInt($('#start').text());
        var limit = 30; // return 30 posts each
        if ($(window).scrollTop() >= postHeight - $(window).height() - 400) {
            var height = $(window).scrollTop();
            $(window).data('ajaxready', false);
            if (start > 0) {
                var new_start = start + limit;
                var dataString = {articles : start, limit : limit};
                $.ajax({
                    cache: false,
                    url: 'extendost.php',
                    type: 'POST',
                    data: dataString,
                    success: function(data) {
                        if ($.trim(data).indexOf('NO POST') > -1) {
                            /* stop infinite scroll when no more data */
                            $('#start').text(0);
                        } else {
                            $('#post_content').append(data);
                            $('#start').text(new_start);
                        }
                        $(window).data('ajaxready', true);
                    }
                });
            }
        }
    });

This way your #start value will change as it scroll and ready for the next scroll value

Then base on the $start (offset) and $limit, make your query like

$query = "SELECT * FROM articles LIMIT {$limit} OFFSET {$start}";
if (!$result = mysqli_query($con, $query) {
  echo 'NO POST';
} else {
  // fetch and echo your result;
}