JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div class="comments-list" x-data="comments()" x-init="loadMore()">
  <template x-for="item in list" :key="item">
    <div class="comment">
      <div><b x-text="item.name"></b></div>
      <div x-text="item.body"></div>
    </div>
  </template>
  <a href="#" @click.prevent="loadMore()">load more</a>
</div>

JavaScript

const BASE_URL = 'https://jsonplaceholder.typicode.com';

function comments() {
	return {
  	list: [],
    page: 1,
    limit: 2,
    loadMore() {
      const url = `${BASE_URL}/posts/1/comments?_page=${this.page}&_limit=${this.limit}`;

      $.get(url).then((response) => {
        this.list = [...this.list, ...response];
        this.page++;
      })
    }
  }
}