JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js"></script>
<body>
  <h1>Infinite Scroll v4 - prefill</h1>

<div class="container">
 <article class="post" id="1">
    <h1>#1 Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique mauris nec sapien efficitur, sit amet varius est interdum. Curabitur quis sem felis. Curabitur at quam sit amet mi tempor tristique quis in lorem. Cras id felis sit amet erat accumsan ornare.</p>
    <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange-tree" /></p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Nullam vel odio nec turpis consequat iaculis at ut nibh. Nulla interdum lacus vitae sapien porttitor congue sagittis ac felis.Curabitur in ligula porttitor, varius purus sed, elementum nibh. Nunc ut libero posuere.</p>
  </article>
</div>

<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

</body>

CSS

body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  padding: 20px;
  max-width: 640px;
  margin: 0 auto;
}

.post {
  border-top: 1px solid #DDD;
  margin: 60px 0;
}

.post img {
  display: block;
  max-width: 100%;
}

.page-load-status {
  display: none;
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* .container {
  height: 300px;
  background: #fff;
  overflow: auto;
} */

JavaScript

$('.container').infiniteScroll({
  path: getPenPath,
  append: false,
  prefill: true,
  status: '.page-load-status',
  responseBody: 'json',
});

function getPenPath() {
  let slug = this.loadCount;
  return `https://jsonplaceholder.typicode.com/posts`;
}

$('.container').on( 'load.infiniteScroll', function( event, data ) {
  let lastID = $(this).find('.post').last().attr('id');
  if(!lastID) lastID = 0;
  const next = parseInt(lastID) + 10;
  
  const appendData = data.filter((post) => {
  		return post.id > lastID && post.id <= next; 
  });
  
  let appendHTML = '';
  
  appendData.forEach((post) => {
  	const template = `
    		<div class="post" id="${post.id}">
          <h1>#${post.id} ${post.title}</h1>
          <p>${post.body}</p>
        </div>
    `;
    appendHTML += template;
  });
  $(event.target).append(appendHTML);
  
  console.log('append');
});