How to fix incorrect post output?

Question

WordPress

Display posts on click using Ajax. I have pagination on the page. I have a total of 11 posts at the moment. 10 posts on the first page and the rest on the second. By clicking on the button, I need to load the posts of the following pages.
But, he loads 10,8,6,4,2 post for me ... Why is this happening?

Perhaps I'm somehow processing the php code incorrectly?

Here are my codes:

js

const loadMoreBtn = document.querySelector('#loadmore');
const postContainer = document.querySelector('#post-container');

window.addEventListener('load', function () {
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function () {
            const customAction = 'loadmore';
            const sendType = 'POST';

            let postData = new FormData();

            postData.append('action', customAction);
            postData.append('query', post_data);
            postData.append('paged', current_page);

            const xhr = new XMLHttpRequest();

            xhr.open(sendType, ajaxurl);

            this.innerText = 'Посты загружаются...';
            this.disabled = true;

            xhr.addEventListener('readystatechange', function (data) {
                if (this.readyState === 4 && this.status === 200) {
                    console.log(data);

                    postContainer.innerHTML = data.target.responseText;

                    loadMoreBtn.innerText = 'Загрузить еще';
                    loadMoreBtn.disabled = false;

                    current_page++;

                    console.log(current_page);

                    if (current_page >= max_pages) {
                        loadMoreBtn.remove();
                    }
                }
            });            

            xhr.send(postData);
        })
    }
})

PHP

function loadmore_get_posts(){
    $data = json_decode(stripslashes($_POST['query']));
    $data['paged'] = $_POST['paged'];

    query_posts($data);
    
    if(have_posts()) :
      while(have_posts()): the_post();    
      the_post();?>
      
      <div class="news__table-item">
                <div class="news__table-img-container">
                    <img src="<?php the_post_thumbnail_url(); ?>" alt="Картинка новости" class="news__table-img"> 
                </div>
        <div class="news__table-content">
          <span class="news__table-category">
            <?php
              foreach((get_the_category()) as $category) {
                echo $category->cat_name . ' ';
              }
            ?> 
          </span>
          <a href="<?php the_permalink(); ?>" class="news__table-title">
            <?php the_title(); ?>
          </a>
          <p class="news__table-desc">
            <?php the_content(); ?>
          </p>
          <div class="news__table-date">
            <?php the_date(); ?>
          </div>
        </div>
      </div>
      
      <?php			
      endwhile;
    endif;
    wp_die();
  }
   
  add_action('wp_ajax_loadmore', 'loadmore_get_posts');
  add_action('wp_ajax_nopriv_loadmore', 'loadmore_get_posts');

SCRIPT

<script>
                        let ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
                        let current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
                        let max_pages = <?php echo $custom_query->max_num_pages ?>;
                        let post_data = <?php echo json_encode($custom_query->query_vars); ?>;
                    </script>

Answer 1

First, what I noticed: you send a post with the old page value (at least it seems so), it's not entirely clear where the data comes from to form the news list.
If from a database, then you can quite simply make an offset when forming a request and display it while the data comes from the database. If you output by 10, then for the first page the query will end like this: "...offset 0 limit 10", and for the second page: "...offset 10 limit 10" (if I did not confuse with the numbering, then so) .