I made some simple changes to your ajax function call and your ajax-js call.I hope this helps out
ajax function call:
$return = array();
$paged = $_POST['page'];
ob_start();
$args = array(
'post_type' => 'book',
'posts_per_page' => 3,
'paged' => $paged,
);
$query = new WP_Query($args);
while($query->have_posts() ):
$query->the_post(); ?>
<div class="ajax"> <?php the_title(); ?> </div>
<?php
endwhile;
wp_reset_query();
$return['load_post'] = ob_get_clean();
$return['max_page'] = $query->max_num_pages;
wp_send_json( $return );
wp_die();
Your ajax-call js:
('.loadmore').on('click', function(){
var data = {
'action': 'rnm_load_more_ajax',
'page': page,
'date_filter': date_filter,
'sports_name': 'marathon-tax',
'compare': compare,
'area_pass': area_input,
'feature_pass': feature_input_arr,
'security': rnmLoadmore.nonce
};
$.post(rnmLoadmore.ajaxurl, data, function(response){
if( response.load_post != ""){
$('.race_posts').append(response);
page++;
if( page > response.max_page) {
$('.loadmore').hide();
}
}
});
});