Multiple masonry galleries on one page

See more:

Javascript

jQuery

Hi,
I am trying to place multiple masonry layouts on one page using THIS as a guide

<div class="filters">
  <div class="ui-group">
    <h3>Color</h3>
    <select class="filter-select" value-group="color">
      <option value="">any</option>
      <option value=".red">red</option>
      <option value=".blue">blue</option>
      <option value=".yellow">yellow</option>
    </select>
  </div>
</div>

  <div class="grid">
    <div class="color-shape red"></div>
    <div class="color-shape blue"></div>
    <div class="color-shape yellow"></div>
  </div>



<div class="filters">
  <div class="ui-group">
    <h3>Size</h3>
      <select class="filter-select" value-group="size">
        <option value="">any</option>
        <option value=".small">small</option>
        <option value=".wide">wide</option>
        <option value=".big">big</option>
        <option value=".tall">tall</option>
      </select>
    </div>
<div>

<div class="grid2">
  <div class="color-shape2 small"></div>
  <div class="color-shape2 big"></div>
  <div class="color-shape2 small"></div>
</div>

...but am wondering how to edit the javascript in the example link

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape'
});

// store filter for each group
var filters = {};

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

...just started to learn Javascript but tried

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape'
});
var $grid2 = $('.grid2').isotope({
  itemSelector: '.color-shape2'
});

// store filter for each group
var filters = {};

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

Hoping someone could help out. Goal is to be able to add more than 2 select/dropdown sortable galleries working independently of one another without the sorting conflicting.

This is as far as I got: My TEST

Thanks

What I have tried:

This is as far as I got: https://codepen.io/howster1976/pen/RwBxbdo