Is there any other filter that I can use instead of Isotope.js? Isotope.js just wont work and I don't know why

Question

I've got 3 buttons, sort of a filter (Smaller/Same/Bigger) that I would like to use with Isotope.js. I looked at the documentation all the time but still could not figure out how to make it work. In my opinion, everything is set good but it is still not working as it should be, as a filter that would show only items with exact class. This is HTML:

<div id="mouse-buttons-wrapper">
                <div class="btn-group filter-button-group" id="mouse-buttons">
                    <button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller"
                        data-filter=".smaller">Smaller</button>
                    <button type="button" class="btn btn-lg btn-outline-warning" id="Same">Same</button>
                    <button type="button" class="btn btn-lg btn-outline-warning" id="Bigger">Bigger</button>
                </div>
            </div>

            <div class="btn-group" id="mouse-buttons"></div>
<div class="container" id="mouses">
                <div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
                    <div class="col grid-item smaller">
                        <div class="card">
                            <img src="..." class="card-img-top img-fluid" alt="...">
                            <div class="card-body">
                                <h6 class="card-title">Card title</h6>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col grid-item">
                        <div class="card">
                            <img src="..." class="card-img-top img-fluid" alt="...">
                            <div class="card-body">
                                <h6 class="card-title">Card title</h6>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col grid-item">
                        <div class="card">
                            <img src="..." class="card-img-top img-fluid" alt="...">
                            <div class="card-body">
                                <h6 class="card-title">Card title</h6>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col grid-item">
                        <div class="card">
                            <img src="..." class="card-img-top img-fluid" alt="...">
                            <div class="card-body">
                                <h6 class="card-title">Card title</h6>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="col grid-item">
                        <div class="card">
                            <img src="..." class="card-img-top img-fluid" alt="...">
                            <div class="card-body">
                                <h6 class="card-title">Card title</h6>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

And my Javascript I for isotope settings:

 $('.grid').isotope({
    // options...
    itemSelector: '.grid-item',
    masonry: {
        columnWidth: 200
    }
});
// filters
$(".grid").isotope({
    filter: '.smaller'
});
$(".grid").isotope({
    filter: '.same'
});
$(".grid").isotope({
    filter: '.bigger'
});
})(jQuery); // End of use strict
// init Isotope
var $grid = $('.grid').isotope({
// options
});
// filter items on button click
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
    filter: filterValue
});
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
    filter: filterValue
});

I would appreciate any help, I am seriously stuck on this for a long time. Thanks a lot.

Answer 1

You are not following the basic structure of isotope. Kindly follow the below structure:

<html>
<div id="mouse-buttons-wrapper">
    <div class="btn-group filter-button-group" id="mouse-buttons">
        <button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller" data-filter=".smaller">Smaller</button>
        <button type="button" class="btn btn-lg btn-outline-warning" id="Same" data-filter=".same">Same</button>
        <button type="button" class="btn btn-lg btn-outline-warning" id="Bigger" data-filter=".bigger">Bigger</button>
    </div>
</div>
<div class="container" id="mouses">
    <div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
        <div class="col grid-item smaller">
            <div class="card">
                <img src="..." class="card-img-top img-fluid" alt="...">
                <div class="card-body">
                    <h6 class="card-title">Card title</h6>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col grid-item same">
            <div class="card">
                <img src="..." class="card-img-top img-fluid" alt="...">
                <div class="card-body">
                    <h6 class="card-title">Card title</h6>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col grid-item bigger">
            <div class="card">
                <img src="..." class="card-img-top img-fluid" alt="...">
                <div class="card-body">
                    <h6 class="card-title">Card title</h6>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col grid-item smaller">
            <div class="card">
                <img src="..." class="card-img-top img-fluid" alt="...">
                <div class="card-body">
                    <h6 class="card-title">Card title</h6>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col grid-item bigger">
            <div class="card">
                <img src="..." class="card-img-top img-fluid" alt="...">
                <div class="card-body">
                    <h6 class="card-title">Card title</h6>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>
</html>

<script type="text/javascript">
jQuery(document).ready(function($) {
var $grid = $('.grid').isotope({
    // options...
    itemSelector: '.grid-item',
    masonry: {
        columnWidth: 200
    }
});

$("#mouse-buttons").on("click", "btn", function() {
   var filterValue = $( this ).attr('data-filter');
   $grid.isotope({ filter: filterValue });
});
});
</script>