How can I create multiple jQuery Isotope filters using the same markup?

Question

I am trying to create two separate filters which consists same markup. The issue is when I click on any filter on first block, it also filters items in second block. How can I setup isotope so that it filters items on the same block?

Below is my HTML and jQuery code.

<div class="callists">

    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-id="0">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>


<div class="callists">

    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-id="0">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

<!-- These two .callists blocks are more or less same with same item classes. -->


<script>
    var $grid = $(".filgrid");
    $grid.isotope({
        itemSelector: ".filgriditem",
        resizesContainer: true,
        resizable: true,
    });
    $(".relfila").click(function(e){
        e.preventDefault();
        
        var ITfilterClass = $(this).attr("data-filter");
        $(this).parents('ul').find('li').removeClass("active");
        $(this).parent().addClass("active");
        
        $grid.isotope({
            filter: ITfilterClass
        });
    });
</script>

Can you please guide me on how to filter items when I click on the .relfila it filters items only within the same .callists block?

Answer 1

Please try this now:

I Update the html code there each filgrid and filterlistul has a unique data-gridid:

<div class="callists">
    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="0">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-filter="*">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid0" data-gridid="0" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

<div class="callists">
    <div class="tag-filter">
        <ul class="filterlistul" data-gridid="1">
            <li class="allfils cat-allfils"><a class="relfila" href="#" data-filter="*">Tous</a></li>
            <li class="allfils cat-entreprise active"><a class="relfila" href="#" data-filter=".filcat113">Entreprise</a></li>
            <li class="allfils cat-centre-ifi"><a class="relfila" href="#" data-filter=".filcat112">Centre IFI</a></li>                         
        </ul>
    </div>

    <div class="calender-items filgrid filgrid1" data-gridid="1" style="position: relative; height: 428px;">
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-centre-ifi filcat112"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
        <div class="calender-item filgriditem calender-item-entreprise filcat113"></div>
    </div>  
</div>

I updated the jQuery code as per above html modify:

$(document).ready(function () {
    $(".filgrid").each(function () {
        var $grid = $(this);
        $grid.isotope({
            itemSelector: ".filgriditem",
            resizesContainer: true,
            resizable: true,
        });
    });
    $(".relfila").click(function (e) {
        e.preventDefault();

        var ITfilterClass = $(this).attr("data-filter");
        var gridId = $(this).closest("ul").attr("data-gridid");
        $(this).parents('ul').find('li').removeClass("active");
        $(this).parent().addClass("active");
        $(".filgrid[data-gridid=" + gridId + "]").isotope({
            filter: ITfilterClass
        });
    });
});