Isotope Filter Custom Taxonomy on CPT Archive Page

isotope-init.js

jQuery(document).ready(function($){

    var $grid =  $('.grid').isotope({
      itemSelector: '.grid-item',
      percentPosition: true,
      layoutMode: 'fitRows',
    });

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



  // Filter items on button click
  $('#my-category').on( 'click', 'a', function() {
      var filterValue = $(this).attr('data-filter');

      $('#cpt-wrap').isotope({ filter: filterValue });

      $(this).parent('div').find('a').removeClass('active');
      $(this).addClass('active');
  });

});

template.php

<?php
// https://github.com/metafizzy/isotope/releases/latest
wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery','imagesloaded'), '3.0.6', true);
wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotope-init.js', array('isotope'), '3.0.6', true);
get_header();

?>

<style>
.cpt-item {
    width: 25%;
}
@media (max-width: 1023px) {
    .cpt-item {
        width: 33.333%;
    }
}
@media (max-width: 767px) {
    .cpt-item {
        width: 50%;
    }
}
</style>

<div class="container">
	<div class="row">
        <div class="fl-content col-lg-12">
            <?php $terms = get_terms( 'my_category' ); ?>
            <?php if( $terms ) { 
            ?>
            <ul id="my-category" class="filter clearfix">
                <li><a href="#" class="active" data-filter="*"><span>All</span></a></li>
                <?php foreach( $terms as $term ){
                    echo "<li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li>";
                } ?>
            </ul><!-- /my-category -->
            <?php } 
            if( have_posts() ) { ?>
                <div id="cpt-wrap" class="clearfix filterable-cpt  grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
                    <div class="cpt-content">
            <?php while( have_posts() ): the_post(); ?>
            <?php $terms = get_the_terms( get_the_ID(), 'my_category' ); ?>
                <?php
                    global $post; ?>
                        <article class="grid-item cpt-item  <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .' '; }; ?>">
                            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
                            <?php
                                if ( has_post_thumbnail($post->ID) ) {
                                echo the_post_thumbnail();
                                } ?>
                                <h3><?php the_title(); ?></h3>
                            </a>
                        </article>
            <?php endwhile; ?>
                    </div><!-- cpt-content -->
                </div><!-- cpt-wrap -->
                <?php } ?>
        </div><!-- end of fl-content -->
    </div><!-- end of row -->
</div> <!-- end of archive container -->

<?php
get_footer();