Добавить данные на странице прокрутки в laravel

Question

Я хочу добавить данные при прокрутке страницы в laravel. Я написал код для запуска запроса, где, если пользователь достигает 80% страницы. Из запроса я получаю 5 данных, теперь я хочу добавить первые данные, и снова, когда пользователь достигает 80% страницы, я хочу добавить вторые данные из этого объекта. Пока у меня есть следующий код:

$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.8) {
  let cat_id = "{{ $data->categories[0]->id }}";
  let post_id = "{{ $data->id }}";
    $.ajax({
        type: "POST",
        url: "{{ route('category_id') }}",
        data: {_token: "{{ csrf_token() }}",id:cat_id, post_id:post_id},
        success: function(response){
          let myVar = response.posts[0];
          $('#append_id').html("<div class='post--item post--single post--title-largest pd--30-0'><div class='post--info'><div class='title'><h2 class='h4'>"+myVar.title+"</h2> </div><br><div class='addthis_inline_share_toolbox'></div></div><div class='post--img'><a href='#' class='thumb'><img src='"+myVar.image+"'></a></div><div class='post--content text-decor'>"+myVar.description+"</div></div>");

        }
    });
}
});

Мой запрос работает, и он добавляет первые данные, но сейчас я просто хочу добавлять данные по одному каждый раз, когда пользователь достигает 80% страницы. Причина, по которой я получаю 5 данных одновременно, потому что я хочу избежать повторения одного и того же сообщения.

Моя попытка:

Теперь я получил 5 данных при загрузке страницы и зашел так далеко:

$(document).ready(function(){
  let cat_id = "{{ $data->categories[0]->id }}";
  let post_id = "{{ $data->id }}";
  let myVar = "";
  $.ajax({
    type: "POST",
    url: "{{ route('category_id') }}",
    data: {_token: "{{ csrf_token() }}",id:cat_id, post_id:post_id},
      success: function(response){
        let i = 0;
        $(window).scroll(function () {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9) {
              i = i++;
              let myVar = response.posts[i];
              $('#append_id').append("<div id='"+myVar.id+"' class='post--item post--single post--title-largest pd--30-0'><div class='post--info'><div class='title'><h2 class='h4'>"+myVar.title+"</h2> </div><br><div class='addthis_inline_share_toolbox'></div></div><div class='post--img'><a href='#' class='thumb'><img src='"+myVar.image+"'></a></div><div class='post--content text-decor'>"+myVar.description+"</div></div>");
            }
        });
      }
    });
});

Но вот я значение переменной i не увеличивается при прокрутке страницы и продолжает добавлять данные 0-го индекса. Я инициализирую переменную i в правильном месте?

Я также хочу остановить выполнение кода, если индекс равен 4.

Спасибо.