title: Isotope Filter and Animation not working
body: <p>I am currently working on a website white implements metafizzy's isotope to sort through different image blocks which have  elements on top of them. </p>
  
  <p>I've searched numerous forums and read through many stack overflow pages regarding this topic but no answer has seemed to work for me. </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;script src="js/modernizr-2.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js-plugin/jquery/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/custom.js"&gt;&lt;/script&gt;
  &lt;script src="js/isotope.settings.js"&gt;&lt;/script&gt;
  &lt;div class="col-sm-3" id="filtersDisplay" style="background-color:rgba(158,162,162,.5);"&gt;
                                  &lt;input type="text" id="myInput" onkeyup="mySearch()" placeholder="Search by keyword"&gt;
                                  &lt;a href="#" class="btn btn-primary"&gt;Reset&lt;/a&gt;
                                   &lt;ul class="filter-list" data-filter-group="subject"&gt;
                                      &lt;li&gt;&lt;a href="javascript:void(0)" class="btn btn-primary" data-filter="*"&gt;Show All&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="javascript:void(0)" class="btn btn-primary" data-filter=".even"&gt;Even&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="javascript:void(0)" class="btn btn-primary" data-filter=".odd"&gt;Odd&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="javascript:void(0)" class="btn btn-primary" data-filter=".prime"&gt;Prime&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-sm-9" id="programsDisplay"&gt;
                                  &lt;section class="programsContent"&gt;
                                      &lt;article class="program odd"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting1"&gt;
                                                  &lt;span class="icons"&gt;1&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                          &lt;/a&gt;
                                      &lt;/article&gt;
                                     &lt;article class="program even prime"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting2"&gt;
                                                  &lt;span class="icons"&gt;2&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program odd prime"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accounting3"&gt;
                                                  &lt;span class="icons"&gt;3&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program even"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;4&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program odd prime"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;5&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program even"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;6&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program odd prime"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;7&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program even"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;8&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program odd"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;9&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                                      &lt;article class="program even"&gt;
                                          &lt;a href="images/Programs/Accounting.jpg"&gt;
                                              &lt;figure&gt;
                                                  &lt;img class="programIcon" src="images/Programs/Accounting.jpg" alt="Accoutning4"&gt;
                                                  &lt;span class="icons"&gt;10&lt;/span&gt;
  
                                              &lt;/figure&gt;
                                              &lt;/a&gt;
                                      &lt;/article&gt;
                             &lt;/section&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                              
                  &lt;/div&gt;
  
                  &lt;/section&gt;
  </code></pre>
  
  
  
  <pre><code>&lt;script type="text/javascript" src="bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"&gt;&lt;/script&gt;
  &lt;!-- isotope --&gt;
  &lt;script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/neko-share-urls/generator.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js-plugin/parallax/js/jquery.stellar.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="js-plugin/appear/jquery.appear.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I initially thought it could have been that I have put scripts in two different parts of the code but I moved the scripts at the top to the bottom and got no luck. </p>
  
  <p>Here is my JS:</p>
  
  <pre><code>var $programs = $($container).isotope({
  
  itemSelector: '.programs',
  layoutMode: 'masonry'
  
  });
  $programs.imagesLoaded( function(){
  
  $programs.isotope('layout');
  });
  
  $('.filter-list a').on('click', 'btn', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
  });
  $('.programsContent').isotope({
  itemSelector: '.programs',
  layoutMode: 'masonry',
  fitRows: {
  fitWidth: true
  }
  });
  </code></pre>
  
  <p>The responsiveness works, but the filtering and animation does not. 
  Does anyone know how I can resolve this issue? I've beaten this problem dry and can't seem to figure it out. </p>
  
  <p>Thank you!</p>