1) functions.php
function kodeks_scripts() {
	if ( ! is_admin() ) {
		//custom javascript
		wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'app-js', get_template_directory_uri() . '/js/app.min.js', null, null, true );

		wp_localize_script( 'app-js', 'myajax', array(
			'ajax_url'          => admin_url( 'admin-ajax.php' ),
			'is_user_logged_in' => is_user_logged_in()
		) );

	}
}
add_action( 'wp_enqueue_scripts', 'kodeks_scripts' );

2) php file
<?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(); ?>

//clients-item.php part
<div class="clients-row post-type__row grid-x align-middle">
    <div class="post-type__col clients-left-col cell large-6">
        <div class="post-type__img" <?php bg( get_the_post_thumbnail_url(), 'large' ); ?>></div>
    </div>
    <div class="post-type__col clients-right-col cell large-6">
        <a href="<?php the_permalink(); ?>" class="post-link">
            <div class="post">
                <div class="post__inner">
	                <?php global $post; ?>
					<?php if ( $view_subtitle = get_sub_field( 'view_subtitle' ) ): ?>
                        <div class="subtitle subtitle--gray"><?php echo $view_subtitle; ?></div>
					<?php elseif ( ( $post_terms = wp_get_object_terms( $post->ID, get_object_taxonomies( $post->post_type ) ) ) ) : ?>
                        <div class="subtitle subtitle--gray"><?php echo $post_terms[0]->name; ?></div>
					<?php endif; ?>
                    <h2 class="post__title"><?php the_title(); ?></h2>
                    <div class="post__excerpt"><?php the_excerpt(); ?></div>
                    <span class="arrow icon-arrow-right1"></span>
                </div>
            </div>
        </a>
    </div>
</div>


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

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