about load more ajax

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();
        }
    }
  });
});