１ページに複数の無限スクロールを実装する

Question

以下のJQueryのプラグインを利用して、Wordpressのカスタム投稿記事の無限スクロールを実装しています。
１クエリに対しては正常に動作したのですが、1ページに複数の無限スクロールを表示させる必要があり、
その場合はうまく動きません。実装方法と実現可否を教えてもらえないでしょうか？
jquery.autopagerで不可能な場合は、ほかのやり方を教えてほしいです。よろしくお願いします。

jquery.autopager-1.0.0

参考にしたサイト

  　<?php
            // $argsは省力
            $the_query = new WP_Query( $args ); // 新規WP queryを作成 変数argsで定義したパラメータを参照
            if( $the_query->have_posts() ):?>
    <?php while( $the_query->have_posts()) : $the_query->the_post();
    // ------------------ ここから繰り返し ------------------- ?>
    <div class="new-post">
        // ここにカスタム投稿で表示したい内容を入れています。
    </div>
    <?php // ------------------ 繰り返しここまで ----------------
                  endwhile; ?>
    <?php
              // --------------- 新着情報WP_query終了 ---------------------------
              wp_reset_postdata();
              endif;
              ?>
  <div id="next">
    <a href="<?php echo next_posts(0, false); ?>">続きはこちら</a>
    <img id="loading" src="<?php echo get_template_directory_uri() ?>/images/support-loading.gif" alt="読み込み中"  width="29" height="29">
  </div>
　// 上記を複数回繰り返し使いたい。

  // JSはPHPファイル内で取り込み
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="<?php echo get_template_directory_uri() ?>/js/jquery.autopager-1.0.0.js"></script>
  <script>
    var maxpage = <?php echo $wp_query->max_num_pages; ?>;  // 最大ページ数取得
    $('#loading').css('display', 'none');　// ローディング画像は一旦消す。
    $.autopager({
      content: '#article-list',// 読み込むコンテンツ
      link: '#next a', // 次ページへのリンク
      autoLoad: false,// スクロールの自動読込み解除
 
      start: function(current, next){
        $('#loading').css('display', 'block');
        $('#next a').css('display', 'none');
      },
 
      load: function(current, next){
          $('#loading').css('display', 'none');
          $('#next a').css('display', 'block');
      }
  });
 
  $('#next a').click(function(){ // 次ページへのリンクボタン
      $.autopager('load'); // 次ページを読み込む
      return false;
  });
  </script>

Answer 1

「続きはこちら」を押した後も、「続きはこちら」のリンク先が変わっていないので、同じページを読み込もうとしてエラーになっているのだと思います。

修正例

//2番目以降に読み込む投稿ページurlの配列を追加
//phpで動的に作成するなどして下さい。
var urls = [
	'https://a.com/05/',
	'https://a.com/06/',
	'https://a.com/07/',
	'https://a.com/08/',
];

$('#next a').click(function(){ // 次ページへのリンクボタン
	$.autopager('load'); // 次ページを読み込む
	$(this).attr('href', urls.shift()); //[続き]リンク先を変更
	if(urls.length===0) $(this).remove(); //すべて読み込んだら[続き]を削除
	return false;
});