Ajax load more button for WordPress post

Ajax loading

 
 <!-- Front End Code - start -->
<div class="related-post">
    <h3 class="title-small mb-30">related posts</h3>
    <div class="row">

        <ul class="ul-li-block portfolio-load">
            <?php
                $tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
                $args = [
                    'post__not_in'        => array( get_queried_object_id() ),
                    'posts_per_page'      => 1,
                    'ignore_sticky_posts' => 1,
                    'orderby'             => 'rand',
                ];
                $my_query = new wp_query( $args );
                if( $my_query->have_posts() ) {
                    while( $my_query->have_posts() ) {
                        $my_query->the_post(); 
            ?>
            <li class="col-lg-6">
                <div class="post-img">
                    <?php the_post_thumbnail(); ?>
                </div>
                <div class="post-contant">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                    <small><?php echo get_the_date(); ?></small>
                </div>
            </li>

            <?php } } wp_reset_postdata(); ?>
        </ul>

    </div>
    <!-- <button id="loadMore" class="loadMore"> -->
        
        <a href="#" id="loadMore" class="loadMore"><?php esc_html_e( 'See More', 'vidco' ) ?></a>
    <!-- </button> -->
</div>
<!-- related-post - end -->



<?php
/*------------------------------------------------------------------------------------------------------------------*/
/*    Loading Function
/*------------------------------------------------------------------------------------------------------------------*/ 
add_action( "wp_ajax_load_more_portfolio", "bdcrictime_load_more_portfolio_func" ); // when logged in
add_action( "wp_ajax_nopriv_load_more_portfolio", "bdcrictime_load_more_portfolio_func" );//when logged out 

//function return new posts based on offset and posts per page value
function bdcrictime_load_more_portfolio_func() {

    $numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
    $page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

    $tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
    $args = [
        'post__not_in'        => array( get_queried_object_id() ),
        'posts_per_page'      => $numPosts,
        'post_status'   => 'publish',
        'paged'          => $page,
        'post_type'        => 'post',
        'orderby'         => 'rand',
        'tax_query' => [
        [
        'taxonomy' => 'post_tag',
        'terms'    => $tags
        ]
        ]
    ];

    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
        while( $my_query->have_posts() ) {
            $my_query->the_post(); 
    ?>

        <li class="col-lg-6">
            <div class="post-img">
                <?php the_post_thumbnail(); ?>
            </div>
            <div class="post-contant">
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
                <small><?php echo get_the_date(); ?></small>
            </div>
        </li>

    <?php } } wp_reset_postdata();
    die();
}

?>
<!-- JavaScript Function for load more -->
<script>
//load more
  var page = 1;
  $(document).on( 'click', '#loadMore', function( event ) {
    event.preventDefault();

    jQuery('#loadMore').addClass('ion-ios-reload');

    var $container = jQuery('.portfolio-load');

    $.ajax({

      type       : "GET",
      data       : {
        action: 'load_more_portfolio',
        numPosts : 2, 
        pageNumber: page
      },
      dataType   : "html",
      url        : ajaxpagination.ajaxurl,
      success    : function(html){
        var $data = jQuery(html);
        if ($data.length) {
          $container.append( html );
        jQuery('#loadMore').removeClass('ion-ios-reload');
        } else {
          jQuery("#loadMore").remove(); 
          jQuery("#loadMore").html("No More Portfolio"); 
        }

      },

    })
    page++;
  })

</script>

<?php 


wp_enqueue_script('ghar-script', GHAR_JS . 'ghar-custom.js', array('jquery'), '1.0.0', true);

wp_localize_script( 'ghar-script', 'ajaxpagination', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
));


// Button style
// =============================================================================
// a.loadMore {
//   display: table;
//   margin: auto;
//   text-align: center;
//   border: 1px solid;
//   padding: 16px 33px;
//   min-width: 170px;
//   border-radius: 26px;
//   background: #ffbf00;
//   color: #fff;
//   margin-top: 50px;
//   position: relative;
// }
// a.loadMore.ion-ios-reload:before {
//   opacity: 1;
//   right: 8px;
//   top: 17px;
//   text-align: center;
//   color: #111;
//   position: absolute;
//   -webkit-animation-name: spin;
//   -webkit-animation-duration: 2000ms;
//   -webkit-animation-iteration-count: infinite;
//   -webkit-animation-timing-function: linear;
//   -moz-animation-name: spin;
//   -moz-animation-duration: 2000ms;
//   -moz-animation-iteration-count: infinite;
//   -moz-animation-timing-function: linear;
//   -ms-animation-name: spin;
//   -ms-animation-duration: 2000ms;
//   -ms-animation-iteration-count: infinite;
//   -ms-animation-timing-function: linear;
//   /* animation-name: spin; */
//   animation-duration: 2000ms;
//   animation-iteration-count: infinite;
//   animation-timing-function: linear;
//   font-size: 1.4em !important;
// }
// @-ms-keyframes spin {
//   from {
//     -ms-transform: rotate(0deg);
//   }
//   to {
//     -ms-transform: rotate(360deg);
//   }
// }
// @-moz-keyframes spin {
//   from {
//     -moz-transform: rotate(0deg);
//   }
//   to {
//     -moz-transform: rotate(360deg);
//   }
// }
// @-webkit-keyframes spin {
//   from {
//     -webkit-transform: rotate(0deg);
//   }
//   to {
//     -webkit-transform: rotate(360deg);
//   }
// }
// @keyframes spin {
//   from {
//     transform: rotate(0deg);
//   }
//   to {
//     transform: rotate(360deg);
//   }
// }