I have an archive of custom post type "Trivia" where I want to display next custom posts on click of a button "Next Post"

I have this code for displaying 1 post on archive page:

  $query_vars = array(
        'post_type'              => array( 'trivia' ),
        'post_status'            => array( 'publish' ),
        'order'                  => 'DESC',
        'orderby'                => 'date',
      //'nopaging'               => true,
        'posts_per_page'         => '1',
        'posts_per_archive_page' => '1',
      'post__not_in' => array($recentPost )
    );

    // The Query
    $query = new WP_Query( $query_vars );

    //OLD LOOp
    $recentPost = [];
    $maxPosts = $query->post_count;
    $startPost;


    $currentPost = $query->current_post;;
    $adSpace = $currentPost+5;


    // The Loop
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
        // do something
       echo the_content();
       
if ($currentPost < $maxPosts){
                // /printf ($currentPost."</br>");
                $currentPost++;

          ?>



          <?php



          if($currentPost % 5 === $adSpace){
echo "Ad Space</br>";
        ?>

</div>





        <?php
        }
    } else {
        // no posts found
    }

    // Restore original Post Data
    wp_reset_postdata();?>
<button type="button" name="button" class="nextPostbtn">Next Posts</button>

I want to load the next posts using ajax on click of this button

    // Restore original Post Data
    wp_reset_postdata();?>
<button type="button" name="button" class="nextPostbtn">Next Posts</button>

And for that I have enqueued & localized script using following code:

global $wp_query;
  wp_enqueue_script( 'myajax_script', get_stylesheet_directory_uri().'/js/main.js', array( 'jquery' ), '1.0.7', true );
  wp_localize_script( 'myajax_script', 'ajaxpagination', array(
  'alert' => "local script added",
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'query_vars' => json_encode( $wp_query->query ),
));

This is my Js which is inside my main.js which is already enqueue and working fine

  $('.nextPostbtn').click( function(){

      function find_page_number( element ) {
            element.find('span').remove();
            return parseInt( element.html() );
        }

      page = find_page_number( $(this).clone() );

    //alert(ajaxpagination.query_vars);

      $.ajax({
            url: ajaxpagination.ajaxurl,
            type: 'POST',
            data: {
                action: 'get_ajax_posts',
            query_vars: ajaxpagination.query_vars,
                    page: page
            },
          beforeSend: function() {
                $('#content').find( 'article' ).remove();
                $('#content').append( '<div class="page-content" id="loader">Loading New Posts...</div>' );
            },
            success: function( data  ) {
            $('#content #loader').remove();
            $('#content').append( data );
                alert( data );
            }
        })

    });

Please help me to achieve the desired result using ajax.

I am new to WordPress ajax & tring to make this work from last 2 days

You help will be highly appreciated

Thanks in advance