为什么我的按钮在抓住第一个项目之后不抓住阵列中的第二个项目？

Question

单击按钮时，它从'/tutorial.html'页面获得一个“ a”，将其存储在数组中，然后将其附加到具有“ .more”类的元素（当前页面）上。它使用提供的代码完成此操作。

但是，当我再次单击该按钮时，什么也没有发生。我希望按钮在第二次单击时抓住数组中的下一个元素。

jQuery(function($) {

  var morePosts = [];

  function getMore() {

    var x = 0;
    var nextPost = morePosts[x];

    $(".more").append(nextPost);

    x++;

  }

  $(".loadMoreButton").on("click", function() {

    if (morePosts.length == 0) {

      $.get('/tutorials.html', function(data) {

        $(data).find('#main li a').each(function() {
          morePosts.push(this);
          getMore();
        });

      });

    }

    else if (morePosts.length > 0) {

      getMore();

    }


  });

});