AJAX Load More (WP) WordPress Posts

Default Shortcode to display posts

function dtwd_special_show_homes($atts){
 $atts = shortcode_atts(
  array(
   'post_type' => 'communities-homes',
   'tax_name' => 'skyline-green',
   'per_page' => '-1',
  ),
  $atts,
  'show_post'
 );
   ob_start(); 
    $query = new WP_Query( array(
        'post_type' => $atts['post_type'],
        'posts_per_page' => $atts['per_page'],
        'tax_query' => array(
         array (
             'taxonomy' => 'community-type',
             'field' => 'slug',
             'terms' => $atts['tax_name'],
         )
     ),
    ) );
    if ( $query->have_posts() ) {
  ?>
     <div class="et_pb_row et_pb_gutters2 row-homes-post" id="main_cont" style="width: 100%; max-width: 100%;" data-per-page="<?php echo $atts['per_page'];?>" data-offset="0" data-type="<?php echo $atts['post_type'];?>" data-terms = "<?php echo $atts['tax_name'];?>" data-total = <?php echo $query->found_posts;?>>
   <div id="old_data">
   <?php
     while ( $query->have_posts() ) : $query->the_post();
    $thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID));
    $ribbon_type = get_field('ribbon_type');
    $price = get_field('price');
    $residence = get_field('residence');
    $available_now = get_field('available_now');
    $terms_comm = get_the_terms( $post->ID, 'community-type' );
    $term_comm = array_pop($terms_comm);
    $tax_type = '<p class="tax_type">'.$term_comm->name.'</p>';
    //var_dump($available_now);
 ?>
  <div class="et_pb_column et_pb_column_1_3">
   <div class="inner-column">
   <figure><img src="<?php echo $thumb; ?>"> <?php if($ribbon_type!=''){echo '<span class="ribbon_info">'.$ribbon_type.'</span>';}?></figure>
   <?php echo $tax_type;?>
   <h3><?php the_title(); ?></h3>
   <?php if($price!=''){echo '<p class="price_type">'.$price.'</p>';}
   if($residence!=''){echo '<p class="res_type">'.$residence.'</p>';}
   if($available_now){echo '<p class="ava_type">Available Now</p>';}?>
   <?php if( have_rows('home_details_information') ):?>
    <div class="text-center homes_data">
    <ul class="no-list">
    <?php
    while ( have_rows('home_details_information') ) : the_row();
    ?>
    <li>
     <?php 
     if (get_sub_field('icon_image')) {
     ?>
     <div class="icon-utility" style="background-color: <?php the_field('title_color'); ?>; mask: url(<?php echo get_sub_field('icon_image') ?>) no-repeat center / contain; -webkit-mask: url(<?php echo get_sub_field('icon_image') ?>) no-repeat center / contain;"></div>
     <!--<img src="<?php //echo get_sub_field('icon_image') ?>" alt="home-icon">!-->
     <p><strong><?php echo get_sub_field('title_text'); ?></strong><br/>
     <?php echo get_sub_field('values'); ?></p>
     <?php } ?>
    </li>
    <?php
    endwhile;
     ?>
    </ul>
   <?php endif;?>
    <?php
    if( have_rows('extra_navigation') ):
    ?>
    <ul class="btn-ul">
     <li>
      <a href="<?php the_permalink(); ?>" class="extra-btn" style="border: 1px solid "><strong>LEARN MORE</strong></a>
     </li>
    <?php
    while ( have_rows('extra_navigation') ) : the_row();
    ?>
    <li>
     <?php 
     if (get_sub_field('button_text')) {
     ?>
     <a href="<?php echo get_sub_field('button_url'); ?>" class="extra-btn" target="<?php the_sub_field('target'); ?>" style="border: 1px solid <?php the_field('extra_navigation_button_color'); ?>; color: <?php the_field('extra_navigation_button_color'); ?>;"><strong><?php echo get_sub_field('button_text'); ?></strong></a>
     <?php } ?>
    </li>
    <?php
    endwhile;
    ?>
    </ul>
    <?php
    endif;
    ?>
    </div>
   </div>
  </div>
     <?php endwhile;
     ?>
 </div>
  </div>
  <div id="new_data"></div>
  <?php
     //echo $query->found_posts;
     if($query->found_posts>$atts['per_page']){?>
     <div class="load_more_btn" style="text-align: center;"><a href="javascript:void(0)" class="load_more_home">Load More</a></div>
    <?php }?>
 <?php }?>
<?php $specialsearch = ob_get_clean();
return $specialsearch;
}
add_shortcode('show_homes', 'dtwd_special_show_homes');

AJAX function for Query Posts

add_action('wp_ajax_data_fetch_alco' , 'data_fetch_alco');
add_action('wp_ajax_nopriv_data_fetch_alco','data_fetch_alco');
function data_fetch_alco(){
 $offset = $_POST["offset"];
 $get_per_page = $_POST["get_per_page"];
 $get_post_type = $_POST["get_post_type"];
 $get_post_terms = $_POST["get_post_terms"];
   $the_query = new WP_Query( array(
        'post_type' => $get_post_type,
        'posts_per_page' => $get_per_page,
        'offset' => $offset,
        'tax_query' => array(
         array (
             'taxonomy' => 'community-type',
             'field' => 'slug',
             'terms' => $get_post_terms,
         )
     ),
    ) );
     if( $the_query->have_posts() ) :
        //while( $the_query->have_posts() ): $the_query->the_post(); ?>
 <div class="et_pb_row et_pb_gutters2 row-homes-post" style="width: 100%; max-width: 100%;">
   <?php
     while ( $the_query->have_posts() ) : $the_query->the_post();
    $thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID));
    $ribbon_type = get_field('ribbon_type');
    $price = get_field('price');
    $residence = get_field('residence');
    $available_now = get_field('available_now');
    $terms_comm = get_the_terms( $post->ID, 'community-type' );
    $term_comm = array_pop($terms_comm);
    $tax_type = '<p class="tax_type">'.$term_comm->name.'</p>';
    //var_dump($available_now);
 ?>
  <div class="et_pb_column et_pb_column_1_3">
   <div class="inner-column">
   <figure><img src="<?php echo $thumb; ?>"> <?php if($ribbon_type!=''){echo '<span class="ribbon_info">'.$ribbon_type.'</span>';}?></figure>
   <?php echo $tax_type;?>
   <h3><?php the_title(); ?></h3>
   <?php if($price!=''){echo '<p class="price_type">'.$price.'</p>';}
   if($residence!=''){echo '<p class="res_type">'.$residence.'</p>';}
   if($available_now){echo '<p class="ava_type">Available Now</p>';}?>
   <?php if( have_rows('home_details_information') ):?>
    <div class="text-center homes_data">
    <ul class="no-list">
    <?php
    while ( have_rows('home_details_information') ) : the_row();
    ?>
    <li>
     <?php 
     if (get_sub_field('icon_image')) {
     ?>
     <div class="icon-utility" style="background-color: <?php the_field('title_color'); ?>; mask: url(<?php echo get_sub_field('icon_image') ?>) no-repeat center / contain; -webkit-mask: url(<?php echo get_sub_field('icon_image') ?>) no-repeat center / contain;"></div>
     <!--<img src="<?php //echo get_sub_field('icon_image') ?>" alt="home-icon">!-->
     <p><strong><?php echo get_sub_field('title_text'); ?></strong><br/>
     <?php echo get_sub_field('values'); ?></p>
     <?php } ?>
    </li>
    <?php
    endwhile;
     ?>
    </ul>
   <?php endif;?>
    <?php
    if( have_rows('extra_navigation') ):
    ?>
    <ul class="btn-ul">
     <li>
      <a href="<?php the_permalink(); ?>" class="extra-btn" style="border: 1px solid "><strong>LEARN MORE</strong></a>
     </li>
    <?php
    while ( have_rows('extra_navigation') ) : the_row();
    ?>
    <li>
     <?php 
     if (get_sub_field('button_text')) {
     ?>
     <a href="<?php echo get_sub_field('button_url'); ?>" class="extra-btn" target="<?php the_sub_field('target'); ?>" style="border: 1px solid <?php the_field('extra_navigation_button_color'); ?>; color: <?php the_field('extra_navigation_button_color'); ?>;"><strong><?php echo get_sub_field('button_text'); ?></strong></a>
     <?php } ?>
    </li>
    <?php
    endwhile;
    ?>
    </ul>
    <?php
    endif;
    ?>
    </div>
   </div>
    </div>
     <?php endwhile;
     ?>
  </div>
         <?php //endwhile; 
    else :
         echo '<h2>No results found</h2>';
        wp_reset_postdata();  
    endif;
          die();
}

JAVASCRIPT to Query the Ajax function

add_action( 'wp_footer', 'ajax_fetch_posts' );
function ajax_fetch_posts() {
?>
<script>
jQuery('.load_more_home').on('click', function() {
 get_per_page = parseInt(jQuery('.row-homes-post#main_cont').attr('data-per-page'));
 get_post_type = jQuery('.row-homes-post#main_cont').attr('data-type');
 get_post_terms = jQuery('.row-homes-post#main_cont').attr('data-terms');
 get_post_total = parseInt(jQuery('.row-homes-post#main_cont').attr('data-total'));
 get_offset = parseInt(jQuery('.row-homes-post#main_cont').attr('data-offset'));
 get_offset = get_offset+get_per_page;
 jQuery('.row-homes-post#main_cont').attr('data-offset',get_offset);
 jQuery('#old_data, #new_data').css('opacity', '.5');
    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        type: 'post',
        data: { 
         action: 'data_fetch_alco', 
         offset: get_offset,
         get_per_page: get_per_page,
         get_post_type: get_post_type,
         get_post_terms: get_post_terms,
        },
        success: function(data) {
         jQuery('#old_data').hide();
            //jQuery('#new_data').html( data );
            jQuery(data).appendTo("#new_data");
            jQuery('#old_data, #new_data').show();
            jQuery('#old_data, #new_data').css('opacity', '1');
            if(get_offset+get_post_total>get_post_total){
             jQuery('.load_more_home').css('pointer-events', 'none');
            }
        },
        error: function() {
            console.log("Error");
   }
    });
});
</script>
<?php
}