Issue with multiple mixitup on same page

Question

I am using 2 mixitup on the same page on two sperate divs but while filter on any of the div it will apply display: none on other mixitup div. For more clarification, I am adding a codepen link.

Visit: https://codepen.io/hmajid/pen/NwKYer?editors=1000

Any help will be appreciated.

Thanks

Answer 1

Actually, we have to provide a unique filter on button for each block(#Container, #Container2)

Please find my code-pen link https://codepen.io/AnkitPandey007/pen/qVWKLj

JS:

$(document).ready(function () {
  $('#Container').mixItUp({
    selectors: {
      filter: '.filter'
    }
  });

  $('#Container2').mixItUp({
    selectors: {
      filter: '.filter2'
    }
  });
});

HTML:

<div id="Container">
    <div style="background: blue;" class="mix category-1" data-my-order="1"> ... </div>
    <div style="background: blue;" class="mix category-1" data-my-order="2"> ... </div>
    <div class="mix category-2" data-my-order="3"> ... </div>
    <div class="mix category-2" data-my-order="4"> ... </div>
</div>

<button class="filter" data-filter=".category-1">Category 1</button>
<button class="filter" data-filter=".category-2">Category 2</button>



<div id="Container2">
    <div style="background: blue;" class="mix test-1" data-my-order="5"> ... </div>
    <div style="background: blue;" class="mix test-1" data-my-order="6"> ... </div>
    <div class="mix test-2" data-my-order="7"> ... </div>
    <div class="mix test-2" data-my-order="8"> ... </div>
</div>
<button class="filter2" data-filter=".test-1">Tes1 1</button>
<button class="filter2" data-filter=".test-2">Test2 2</button> 

CSS:

#Container2 .mix, #Container .mix{
  display: none;
  background: red;
  width: 100px;
  height: 100px; 
}