Code load toàn bộ comment có Loadmore

<style>
/*<![CDATA[*/
.boxContainer{max-width:700px;margin:auto}
.comment{display:flex;align-items:flex-start;border:1px solid #ddd;padding:15px;margin-bottom:20px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:opacity 0.3s ease,transform 0.3s ease;overflow:hidden}
.avatar{padding-left:10px}
.avatar img{width:60px;height:60px;border-radius:50%;margin-right:15px}
.content{flex:1}
.content p{margin:0}
.content strong{color:#007bff}
.content a{color:#007bff;text-decoration:none;display:block;margin-top:10px}
.content a:hover{text-decoration:underline}
#loadMoreBtn{display:flex;align-items:center;justify-content:center;margin:20px auto;padding:10px 20px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:5px;cursor:pointer;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s ease}
#loadMoreBtn:hover{background-color:#0056b3}
#loadingIndicator{margin-right:10px;border:4px solid transparent;border-top:4px solid #fff;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/*]]>*/
</style>
<div class='boxContainer'>
  <div id="commentsContainer"></div>
  <div id="loadMoreBtn">
    <span id="loadingIndicator"></span> Load More
  </div>
</div>
<script>
  //<![CDATA[
  window.addEventListener('load', function() {
    const COMMENTS_PER_PAGE = 5;
    const AVATAR_SIZE = 60;
    let currentPage = 1;
    let isLoading = false;

    function getAuthorAvatar(comment) {
      const authorAvatar = comment.author[0].gd$image.src;
      if ("https://img1.blogblog.com/img/b16-rounded.gif" !== authorAvatar && "https://img1.blogblog.com/img/blank.gif" !== authorAvatar) {
        return authorAvatar.replace("s512-c", `s${AVATAR_SIZE}-c`);
      } else {
        return `https://lh3.googleusercontent.com/-tsJltTo4SGc/Zh3fciGEgWI/AAAAAAAAffc/uJd8nC81OxAiQx64pztsCUdbZ5y1tYGdQCNcBGAsYHQ/h120/no-avatar.jpg`;
      }
    }

    function loadComments() {
      if (isLoading) return;
      isLoading = true;
      $('#loadingIndicator').show();
      const apiUrl = '/feeds/comments/default?alt=json-in-script&max-results=' + COMMENTS_PER_PAGE + '&start-index=' + ((currentPage - 1) * COMMENTS_PER_PAGE + 1);
      $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'jsonp',
        success: function(data) {
          handleComments(data);
        },
        error: function(error) {
          handleError(error);
        }
      });
    }

    function getPostTitle(postId, callback) {
      const postUrl = `/feeds/posts/default/${postId}?alt=json`;
      $.ajax({
        url: postUrl,
        type: 'GET',
        dataType: 'json',
        success: function(postData) {
          callback(postData.entry.title.$t);
        }
      });
    }

    function handleComments(data) {
      const comments = data.feed.entry;
      if (comments && comments.length > 0) {
        for (let i = 0; i < comments.length; i++) {
          const comment = comments[i];
          const authorName = comment.author[0].name.$t;
          const authorAvatar = getAuthorAvatar(comment);
          const commentContent = comment.content.$t;
          const commentLink = comment.link[2].href;
          const authorUrl = comment.author[0].uri.$t;
          const postIdurl = comment.link[0].href;
          const match = postIdurl.match(/\/(\d+)\/comments\//);
          const postId = match ? match[1] : null;

          getPostTitle(postId, function(postTitle) {
            const commentElement = $(`<div class="comment"><div class="avatar"><img src="${authorAvatar}" alt="Avatar"></div><div class="content"><p><a target="_blank" href = '${authorUrl}'><strong>${authorName}</strong></a>: ${commentContent}</p><a href="${commentLink}" target="_blank">${postTitle}</a></div></div>`);
            commentElement.appendTo('#commentsContainer').css({
              opacity: 1,
              transform: 'translateY(0)'
            });
          });
        }
      } else {
        $('#loadMoreBtn').hide();
      }
      isLoading = false;
      $('#loadingIndicator').hide();
    }

    function handleError(error) {
      console.error('Error loading comments:', error.responseText);
      isLoading = false;
      $('#loadingIndicator').hide();
    }
    $('#loadMoreBtn').on('click', function() {
      currentPage++;
      loadComments();
    });
    // Bắt đầu tải comment
    loadComments();
  });
  //]]>
</script>