Проблемы с Ajax загружают больше запросов на CPT l oop внутри foreach на основе категорий

Question

У меня есть пользовательский тип записи WordPress, на его странице архива у меня есть foreach l oop, основанный на пользовательской таксономии. Для каждого элемента, возвращенного из l oop, в поле have_posts / the_post l oop отображаются сообщения, назначенные для этой категории, с кнопкой для запроса дополнительных сообщений через Ajax для каждой строки в категории foreach l oop.

Проблема, с которой я сталкиваюсь, заключается в том, что независимо от того, какую кнопку я нажимаю, все циклы возвращают одинаковые результаты, которые не являются новым сообщением, а просто существующими отображаемыми результатами, которые переопределяют то, что уже отображалось.

JS для l oop распознает, какая кнопка .loadmore была нажата, но все кнопки обновляют данные для третьего ответа, похоже, не распознает итерацию.

Я думаю, что проблемы связаны с этим, что нет корреляции между el [i] (например, 2) и res [i] (например, 2), но я не уверен, как этого добиться.

Любые советы приветствуются :)

Ajax. js

const xhr = new XMLHttpRequest();
  const el = document.querySelectorAll('.loadmore');

  // Loop over all loadmore buttons
  for (let i = 0; i < el.length; i++) {

    el[i].addEventListener('click', e => {
      e.preventDefault();

      console.log('Which loadmore clicked: ' + [i]);

      const res = document.querySelectorAll('.response');

      // Loop over response for each output
      for (let i = 0; i < res.length; i++) {

        xhr.open('POST', WP.ajax, true);

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');

        xhr.onload = function () {
          if (xhr.status === 200) {

            // Update response div 
            res[i].innerHTML = xhr.responseText;

            console.log("Fired?");
            console.log('Which res: ' + [i]);
            console.log(xhr.responseText);
            // console.log(this.xhr);

            WP.current_page++;
          } else {
            console.log(this.xhr);
          }
        };

      }

      // xhr.send(data);
      xhr.send('action=loadmore&query=' + WP.posts + '&page=' + WP.current_page + '');

    },
      false
    );
  }

Архив-CPT. php

$categories = get_terms('category_factsheets');

/**
 * Loop over each category 
 */
$i = 0; foreach ($categories as $category): ?>

<div class="container--slim">

  <div class="factsheet-group">
    
    <h2><?php echo $category->name; ?></h2>

    <div id="response_<?php echo $i; ?>" class="response inner">

      <?php
      $args = array(
        'tax_query' => array(
          array(
            'taxonomy' => 'category_factsheets',
            'field' => 'id',
            'terms' => $category->term_id
          )
        )
      );
      /**
       * Loop over each category to display all associated posts
       */
      if (have_posts()): query_posts( $args ); while (have_posts()): the_post(); 
        $factsheet = get_field('factsheet'); 
        ?>
        
        <div class="factsheet-item">
          <h3><?php echo $factsheet['issue_date']; ?></h3>
          <p><?php the_title(); ?></p>
          <?php if ($factsheet['pdf']): ?>
            <a href="<?php echo $factsheet['pdf']; ?>" target="_blank">View PDF</a>
          <?php endif; ?>
        </div>

      <?php endwhile; endif; ?>

    </div><!-- inner : END -->
    

    <div class="loadmore btn btn--black">View more</div>
  
  </div><!-- factsheet-group : END -->

</div><!-- container--slim : END -->

<?php $i++; endforeach;

Функции. php

function factsheets_loadmore_ajax_handler() {

  $categories = get_terms('category_factsheets');

  $params = json_decode( stripslashes( $_POST['query'] ), true );
	$params['paged'] = $_POST['page'] + 1; // we need next page to be loaded
  $params['post_status'] = 'publish';
 
	// it is always better to use WP_Query but not here
	query_posts( $params );
 
	if( have_posts() ): while( have_posts() ): the_post();
    
    // the_title();
    $factsheet = get_field('factsheet'); 
    ?>
      
      <div class="factsheet-item">
        <h3><?php echo $factsheet['issue_date']; ?></h3>
        <p><?php the_title(); ?></p>
        <?php if ($factsheet['pdf']): ?>
          <a href="<?php echo $factsheet['pdf']; ?>" target="_blank">View PDF</a>
        <?php endif; ?>
      </div>

  <?php
  endwhile; endif;

	die; // here we exit the script and even no wp_reset_query() required!
}
 
add_action('wp_ajax_loadmore', 'factsheets_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'factsheets_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}