acf repeater show more (load more) button with js

repeater-field-show-more-button.php

<?php
/**
 * Download
 * Elements
 *
 * @package THEMENAME
 */
$fullwidth = get_sub_field('fullwidth');
$center = get_sub_field('center');
$special = get_sub_field('special');
$logo_number = get_row_index();
?>

<?php if ( get_row_layout() == 'elements_normal' ): ?>
<section class="dg__row elements section-<?php echo get_row_index(); ?>"  data-link="<?php echo get_row_index(); ?>">
<div class="<?php if( ($fullwidth) ): ?>dg__full<?php else: ?> dg__container<?php endif; ?>">

	<?php if( get_sub_field('title') ) : ?>
		<?php if( ($special) ): ?>
            <h2 class="title special<?php if( get_sub_field('bold_title') ) : ?> bold<?php endif; ?><?php if( ($center) ): ?> center<?php endif; ?>"><?php the_sub_field( 'title' ); ?></h2>
		<?php else: ?>
            <h2 class="title<?php if( get_sub_field('bold_title') ) : ?> bold<?php endif; ?><?php if( ($center) ): ?> center<?php endif; ?>"><?php the_sub_field( 'title' ); ?></h2>
		<?php endif; ?>
	<?php endif; ?>
	<?php if( get_sub_field('subtitle') ) : ?><div class="subtitle <?php if( ($special) ): ?> special<?php endif; ?><?php if( get_sub_field('bold_title') ) : ?> bold<?php endif; ?><?php if( ($center) ): ?> center<?php endif; ?>"><?php the_sub_field( 'subtitle' ); ?> </div>
	<?php endif; ?>


	<?php
	if( have_rows('item') ): ?>
	<div class="logo-items logo-items-<?php echo $logo_number; ?>">
	<?php while ( have_rows('item') ) : the_row(); ?>
			<div class="item">
				<?php if( get_sub_field('url') ) : ?>
					<a class="link" href="<?php the_sub_field( 'url' ); ?>" target="_blank">
				<?php endif; ?>
				<?php
				$download_image = get_sub_field('image');
				if( !empty($download_image) ):
					$url = $download_image['url'];
					$title = $download_image['title'];
					$alt = $download_image['alt'];
					$caption = $download_image['caption'];
                    $size = 'thumbnail';
					$thumb = $download_image['sizes'][ $size ];
                 ?>
                    <div class="center">
                        <img src="<?php echo $thumb; ?>">
                    </div>
                <?php else: ?>
				<?php endif; ?>
                <?php if( get_sub_field('title') ) : ?>
	                <?php the_sub_field( 'title' ); ?>
			    <?php endif; ?>
				<?php if( get_sub_field('url') ) : ?>
					</a>
				<?php endif; ?>
			</div>

	<?php endwhile; ?>

        <div class="loader">
            <button id="loadmore-<?php echo $logo_number; ?>" class="btn btn-default default loadmore"><i class="fa fa-repeat" aria-hidden="true"></i><?php _e('Weitere anzeigen (+8)', DECOMTHEME_TRANSLATION); ?></button>
        </div>

	</div>
	<?php endif; ?>
</div>
<script>
    /* <![CDATA[ */
    jQuery(document).ready(function() {
        var size_li = jQuery(".logo-items .item").size(),
            $num = <?php echo $logo_number; ?>,
            x = 8;
        jQuery('.logo-items-'+$num+' .item:lt(' + x + ')').show();
        console.log(jQuery('.logo-items-'+$num+' .item:lt(' + x + ')'));
        jQuery('#loadmore-'+$num).click(function (e) {
            x= (x+8 <= size_li) ? x+8 : size_li;
            jQuery('.logo-items-'+$num+' .item:lt('+x+')').show('fast').css('display', 'table');
            e.preventDefault();
            // kill button if no more to show
            var loadMoreBtn = jQuery(this),
                hiddenClass = jQuery('.logo-items-'+$num+' .item:hidden');
            if(jQuery(hiddenClass).size() === 0){
                loadMoreBtn.hide();
            }
        });

    });
    /* ]]> */
</script>
</section>
<?php endif; ?>