Isotope - Cannot read property 'filteredItems' of undefined

Question

I am trying to get my isotope post page to work with a Load More button (as seen here: https://codepen.io/bebjakub/pen/jWoYEO). I have the code working on Codepen, but I couldn't get it working on the website.

Working Codepen (My (Filtering & Load More) - https://codepen.io/whitinggg/pen/qyvVwz

Live Page Link - Here

I am currently seeing this error in console in regards to my isotope.js file:

Uncaught TypeError: Cannot read property 'filteredItems' of undefined
    at loadMore (isotope.js?v=2.2.7:53)
    at HTMLDocument.<anonymous> (isotope.js?v=2.2.7:48)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

Can anyone help with what this error means? Please help me to resolve the it.

My Isotope.js File

jQuery(function ($) {


    // with jQuery
    var $container = $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'packery',
      columnWidth: '.grid-sizer',
      packery: {
        gutter: '.gutter-sizer'
      }
    });

     //Add the class selected to the item that is clicked, and remove from the others
     var $optionSets = $('#filters'),
     $optionLinks = $optionSets.find('a');

     $optionLinks.click(function(){
     var $this = $(this);
     // don't proceed if already selected
     if ( $this.hasClass('selected') ) {
       return false;
     }
     var $optionSet = $this.parents('#filters');
     $optionSets.find('.selected').removeClass('selected');
     $this.addClass('selected');

     //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
     $container.isotope({ filter: selector });

     return false;
     });

    // layout Isotope after each image loads
    $container.imagesLoaded().progress( function() {
      $container.isotope('layout');
    });


//****************************
  // Isotope Load more button
  //****************************
  var initShow = 15; //number of items loaded on init & onclick load more button
  var counter = initShow; //counter for load more button
  var iso = $container.data('grid'); // get Isotope instance

  loadMore(initShow); //execute function onload

  function loadMore(toShow) {
    $container.find(".hidden").removeClass("hidden");

    var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
      return item.element;
    });
    $(hiddenElems).addClass('hidden');
    $container.isotope('layout');

    //when no more to load, hide show more button
    if (hiddenElems.length == 0) {
      jQuery("#load-more").hide();
    } else {
      jQuery("#load-more").show();
    };

  }

  //append load more button
  $container.after('<button id="load-more"> Load More</button>');

  //when load more button clicked
  $("#load-more").click(function() {
    if ($('#filters').data('clicked')) {
      //when filter button clicked, set initial value for counter
      counter = initShow;
      $('#filters').data('clicked', false);
    } else {
      counter = counter;
    };

    counter = counter + initShow;

    loadMore(counter);
  });

  //when filter button clicked
  $("#filters").click(function() {
    $(this).data('clicked', true);

    loadMore(initShow);
  })


});

Answer 1

The issue behind why it was working on codepen and no on my site turns out to be a simple one. Cant remember why i did it now, but i had changed a line of code slightly from Codepen to site which seems to have caused the issue. That line was:

var iso = $container.data('grid'); // get Isotope instance

Should have been:

var iso = $container.data('isotope'); // get Isotope instance