acfpro

I am trying to add a button to load more ACF repeted fields via AJAX. The code seems fine but the button is not working. I have added the limit of posts to show on page load to 3 which is working but upon clicking on the button there is an error in the console. Can’t figure out how to fix that. Can anyone help me fix that. Thanks

Here is the PHP and the JS:

<?php

<?php if (have_rows('news_events')) :
  $total = count(get_field('news_events'));
?>
  <section class="back-to-previous">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="page-back">
            <button class="goback" onclick="history.back()"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Go Back</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="news-events">

    <div class="container">
      <div class="row" id="news_events_posts">
        <?php
        $number = 3; // the number of rows to show
        $count = 0; // a counter
        while (have_rows('news_events')) : the_row();
        ?>
          <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="blog-box">
              <a target="_blank" href="<?php the_sub_field('uplod_pdf_'); ?>">
                <?php $image = get_sub_field('image');
                if (!empty($image)) : ?>
                  <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                <?php endif; ?>
              </a>
              <div class="event-details">
                <div class="event-title"><a target="_blank" href="<?php the_sub_field('uplod_pdf_'); ?>"> <?php the_sub_field('title'); ?> </a></div>
              </div>
            </div>
          </div>
        <?php
          $count++;
          if ($count == $number) {
            // we've shown the number, break out of loop
            break;
          }
        endwhile; ?>

      </div>
      <a id="my-repeater-show-more-link" href="javascript: my_repeater_show_more();" <?php if ($total < $count) { ?> style="display: none;" <?php } ?>>Show More</a>
      
  <script type="text/javascript">
    var my_repeater_field_post_id = <?php echo $post->ID; ?>;
    var my_repeater_field_offset = <?php echo $number; ?>;
    var my_repeater_field_nonce = '<?php echo wp_create_nonce('my_repeater_field_nonce'); ?>';
    var my_repeater_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
    var my_repeater_more = true;

    function my_repeater_show_more() {

      // make ajax request
      jQuery.post(
        my_repeater_ajax_url, {
          // this is the AJAX action we set up in PHP
          'action': 'my_repeater_show_more',
          'post_id': my_repeater_field_post_id,
          'offset': my_repeater_field_offset,
          'nonce': my_repeater_field_nonce
        },
        function(json) {
          // add content to container
          // this ID must match the containter 
          // you want to append content to
          jQuery('#news_events_posts').append(json['content']);
          // update offset
          my_repeater_field_offset = json['offset'];
          // see if there is more, if not then hide the more link
          if (!json['more']) {
            // this ID must match the id of the show more link
            jQuery('#my-repeater-show-more-link').css('display', 'none');
          }
        },
        'json'
      );
    };
  </script>
    </div>
  </section>
<?php endif; ?>