WordPress 'Load More' Functionality with Ajax

functions.php

<?php

function load_more_scripts() {
  wp_enqueue_script( 'load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array('jquery'), '1.0', true );
  wp_localize_script( 'load-more', 'load_more_params', array(
    'ajax_url' => esc_url( admin_url( 'admin-ajax.php' ) ),
    'security' => wp_create_nonce( 'load_more_security' ),
  ));
}
add_action( 'wp_enqueue_scripts', 'load_more_scripts' );

function load_more_posts() {
  check_ajax_referer( 'load_more_security', 'security' );
  $paged = $_POST['page'];
  $post_type = isset($_POST['post_type']) ? $_POST['post_type'] : 'post';
  
  $query_args = array(
    'post_type' => $post_type,
    'post_status' => 'publish',
    'posts_per_page' => 5,
    'paged' => $paged,
  );

  if (is_archive()) {
    $query_args['post_type'] = get_queried_object()->name;
  }

  $query = new WP_Query($query_args);

  ob_start();

  while ( $query->have_posts() ) : $query->the_post();
    // Output your post content here
  endwhile;

  $data = ob_get_clean();

  wp_send_json_success( $data );
}
add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query( array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 5,
  'paged' => $paged,
));
?>
<div id="post-container">
  <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <!-- Output your post content here -->
  <?php endwhile; ?>
</div>

<?php if ($query->max_num_pages > 1) : ?>
  <div id="load-more-wrapper">
    <a href="#" class="load-more" data-nonce="<?php echo wp_create_nonce( 'load_more_security' ); ?>" data-page="<?php echo $paged; ?>" data-post-type="<?php echo $query->query_vars['post_type']; ?>">Load More Posts</a>
  </div>
<?php endif; ?>

<?php wp_reset_postdata(); ?>

load-more.js

jQuery(document).ready(function($) {
  $('#load-more-wrapper').on('click', '.load-more', function(e) {
    e.preventDefault();
    var nextlink = $(this).attr('href');
    var nonce = $(this).data('nonce');
    var page = parseInt($(this).data('page'));
    var post_type = $(this).data('post-type');
    var loading = '<div class="loading-indicator"><span>Loading...</span></div>';
    $(this).replaceWith(loading);
    $.ajax({
      url: load_more_params.ajax_url,
      type: 'POST',
      dataType: 'json',
      data: {
        action: 'load_more_posts',
        security: load_more_params.security,
        page: page + 1,
        post_type: post_type,
      },
      success: function(response) {
        if (response.success) {
          $('#post-container').append(response.data);
          $('#load-more-wrapper').html('<a href="#" class="load-more" data-nonce="' + nonce + '" data-page="' + (page + 1) + '" data-post-type="' + post_type + '">Load More Posts</a>');
        } else {
          console.log(response.data);
        }
      },
    });
  });
});

/* code uses WordPress's wp_localize_script() function to pass the AJAX URL and the security token to the JavaScript code, 
and verifies it using the check_ajax_referer() function to prevent unauthorized access to your server. 
Also replaces the load more button with a loading indicator while waiting for the response from the server. 
Once the response is received, it appends the new posts to the container and creates a new load more button with the updated page */