İsotope js is-checked sorunu (yardım)

Merhaba
İsotope portfolio için kullandığım js kodlarında şöyle bir problemim var araştırmama rağmen çözemedim. Js bilgimde maalesef çok az. İlgilenen arkadaşlara şimdiden teşekkür ederim.
Problem : istediğim başlığın classına is-active vermeme rağmen css olarak işliyor ama ilgili birimleri getirmiyor. Örneğin web site is-checked olmasına rağmen ilk açılışta websitenin filterı olan a1 itemleri gelmiyor tüm itemler geliyor. Başka butona tıklayıp mesala Mobile App tekrar websiteye tıklarsam istediğim website itemleri gelmiş oluyor. Yani websiteye tıklamadan websitenin itemlerini göstermiyor, hepsini gösteriyor.

<section class="portfolio clearfix" id="portfolio-home">
<div class="container">
<!--section title -->
<h2 class="b-clor">Our Impressive Portfolio</h2>
<hr class="dark-line">
<!--end section title -->
<div class="button-group filter-button-group clearfix">
<button class="button " data-filter="*">All Work</button>
<button class="button is-checked" data-filter=".a1">Website</button>
<button class="button" data-filter=".a2">Logo</button>
<button class="button" data-filter=".a3">Mobile App</button>

</div>
<!-- button-group ends -->
<div class="grid clearfix row">
<!-- Items for portfolio
currently using 12 items. More Items can be added. -->
<div class="a2 a1 grid-item">
<div class="img_container">

<div class="overlay">
<a class="btn btn-nofill proDetModal1">Discover</a>
</div>
<!-- End of .overlay -->
</div>
<!-- End of .img_container -->
<div class="text-content">
<h3><a class="proDetModal proDetModal1">Diet Hospital<span>Website</span></a></h3>
</div>
</div>
<!-- End of .grid-item -->
<div class="a3 grid-item">
<div class="img_container">

<div class="overlay">
<a class="btn btn-nofill proDetModal2">Discover</a>
</div>
<!-- End of .overlay -->
</div>
<!-- End of .img_container -->
<div class="text-content">
<h3><a class="proDetModal proDetModal2">Jet Airplane<span>Website</span></a></h3>
</div>
</div>
<!-- End of .grid-item -->
<div class="a2 a1 grid-item">
<div class="img_container">

<div class="overlay">
<a class="btn btn-nofill proDetModal3">Discover</a>
</div>
<!-- End of .overlay -->
</div>
<!-- End of .img_container -->
<div class="text-content">
<h3><a class="proDetModal proDetModal3">Spring Water Service<span>Website</span></a></h3>
</div>
</div>
<!-- End of .grid-item -->
</div>
<!-- End of .grid -->
<div class="text-center port-dms"> <a href="portfolio.html" class="btn btn-fill full-width">Discover more</a> </div>
</div>
</section>

"use strict";


var $fwindow = $(window);
// portfolio menu controler
$fwindow.on("load", function() {

// Animate loader off screen
$(".loader_wrapper").fadeOut("5000");
if ($('.grid').length > 0) {

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


// filter items on button click
$('.filter-button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
});

$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
});