Ajax WP Posts

functions.php

//Ajax load more posts
add_action( 'wp_ajax_load_more', 'load_more_callback' );
add_action( 'wp_ajax_nopriv_load_more', 'load_more_callback' );

function load_more_callback() {
	$news = new WP_Query( array(
		'post_type'      => 'clients_cpt',
		'order'          => 'DESC',
		'orderby'        => 'date',
		'posts_per_page' => $_POST['perpage'],
		'offset'         => $_POST['offset']
	) );
	if ( $news->have_posts() ) {
		while ( $news->have_posts() ) {
			$news->the_post();
			show_template( 'clients-item', null, 'template-parts/cpt' );
		}
	}
	wp_die();
}

index.php

<!--Display clients post type-->
<?php $post_per_page = 4; ?>
<?php $arg = array(
	'post_type'      => 'clients_cpt',
	'order'          => 'DESC',
	'orderby'        => 'date',
	'posts_per_page' => $post_per_page
); ?>

<?php $the_query = new WP_Query( $arg );
if ( $the_query->have_posts() ) : ?>
    <section class="clients post-type">
        <div class="clients-container grid-container grid-container--full"
             data-per-page="<?php echo $post_per_page; ?>"
             data-clients="<?php echo wp_count_posts( 'clients_cpt' )->publish; ?>">
			<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
				<?php show_template( 'clients-item', null, 'template-parts/cpt' ); ?>
			<?php endwhile; ?>
        </div>
        <div class="grid-container grid-container--full">
            <div class="grid-x">
                <div class="cell text-center">
                    <a href="#"
                       class="js-button button button--rounded"><?php _e( 'LAST FLERE JOBBER', 'foundation' ); ?></a>
                </div>
            </div>
        </div>
    </section>
<?php endif;
wp_reset_query(); ?>

main.js

//Ajax load more posts
        var loaded = false;
        $('.js-button').click(function (e) {
            e.preventDefault();
            if (!loaded) {
                loaded = true;
                var clientButton = $(this);
                var container = clientButton.closest('.clients').find('.clients-container');
                var clientsCount = container.data('clients');
                var clientsPerPage = container.data('per-page');
                var clientsLoaded = container.find('.clients-row').length;
                $.post(myajax.ajax_url, {
                    action: 'load_more',
                    offset: clientsLoaded,
                    perpage: clientsPerPage
                }).success(function (response) {
                    container.append(response);
                    loaded = false;
                    if (clientsCount <= clientsLoaded + clientsPerPage) {
                        clientButton.hide();
                    }
                })
            }
        });