Trying to integrate pagination on multiple isotope instance

I've been trying integrate a filter functionality using a library called Isotope.js. Included with filter is a pagination functionality. I've been trying to solve the issue on how I can make the pagination work on multiple isotope instances. It seems that pagination is duplicating itself multiple times when using the filter and affecting other instances present when using the pagination

Below is a sample work in progress of what I'm currently working on

var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({
  itemSelector: itemSelector
});

//Ascending order
var responsiveIsotope = [
  [480, 3],
  [720, 5]
];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';

// update items based on current filters    
function changeFilter(selector) {
  $container.isotope({
    filter: selector
  });
}

//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
  currentPage = n;
  var selector = itemSelector;
  var exclusives = [];
  // for each box checked, add its value and push to array
  $checkboxes.each(function(i, elem) {
    if (elem.checked) {
      selector += (currentFilter != '*') ? '.' + elem.value : '';
      exclusives.push(selector);
    }
  });
  // smash all values back together for 'and' filtering
  filterValue = exclusives.length ? exclusives.join('') : '*';

  // add page number to the string of filters
  var wordPage = currentPage.toString();
  filterValue += ('.' + wordPage);

  changeFilter(filterValue);
}

// determine page breaks based on window width and preset values
function defineItemsPerPage() {
  var pages = itemsPerPageDefault;

  for (var i = 0; i < responsiveIsotope.length; i++) {
    if ($(window).width() <= responsiveIsotope[i][0]) {
      pages = responsiveIsotope[i][1];
      break;
    }
  }
  return pages;
}

function setPagination() {

  var SettingsPagesOnItems = function() {
    var itemsLength = $container.children(itemSelector).length;
    var pages = Math.ceil(itemsLength / itemsPerPage);
    var item = 1;
    var page = 1;
    var selector = itemSelector;
    var exclusives = [];
    // for each box checked, add its value and push to array
    $checkboxes.each(function(i, elem) {
      if (elem.checked) {
        selector += (currentFilter != '*') ? '.' + elem.value : '';
        exclusives.push(selector);
      }
    });
    // smash all values back together for 'and' filtering
    filterValue = exclusives.length ? exclusives.join('') : '*';
    // find each child element with current filter values
    $container.children(filterValue).each(function() {
      // increment page if a new one is needed
      if (item > itemsPerPage) {
        page++;
        item = 1;
      }
      // add page number to element as a class
      wordPage = page.toString();

      var classes = $(this).attr('class').split(' ');
      var lastClass = classes[classes.length - 1];
      // last class shorter than 4 will be a page number, if so, grab and replace
      if (lastClass.length < 4) {
        $(this).removeClass();
        classes.pop();
        classes.push(wordPage);
        classes = classes.join(' ');
        $(this).addClass(classes);
      } else {
        // if there was no page number, add it
        $(this).addClass(wordPage);
      }
      item++;
    });
    currentNumberPages = page;
  }();

  // create page number navigation
  var CreatePagers = function() {

    var $isotopePager = ($('.' + pagerClass).length == 0) ? $('<div class="' + pagerClass + '"></div>') : $('.' + pagerClass);

    $isotopePager.html('');
    if (currentNumberPages > 1) {
      for (var i = 0; i < currentNumberPages; i++) {
        var $pager = $('<a href="javascript:void(0);" class="pager" ' + pageAttribute + '="' + (i + 1) + '"></a>');
        $pager.html(i + 1);

        $pager.click(function() {
          var page = $(this).eq(0).attr(pageAttribute);
          goToPage(page);
        });
        $pager.appendTo($isotopePager);
      }
    }
    $container.after($isotopePager);
  }();
}
// remove checks from all boxes and refilter
function clearAll() {
  $checkboxes.each(function(i, elem) {
    if (elem.checked) {
      elem.checked = null;
    }
  });
  currentFilter = '*';
  setPagination();
  goToPage(1);
}

setPagination();
goToPage(1);

//event handlers
$checkboxes.change(function() {
  var filter = $(this).attr(filterAttribute);
  currentFilter = filter;
  setPagination();
  goToPage(1);
});

$('#clear-filters').click(function() {
  clearAll()
});

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.centered-component {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}

.centered-component .filter-sidebar {
  width: 100%;
  max-width: 250px;
  margin-right: 24px;
}

.centered-component .content-block {
  flex: 1;
}

.filter-sidebar {
  display: flex;
  flex-direction: column;
}

.products-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
}

.isotope-container>h2 {
  margin-bottom: 48px;
}

.products-item {
  position: relative !important;
  top: initial !important;
  left: initial !important;
}

.products-container {
  height: initial !important;
}

.isotope-pager {
  margin-top: 42px;
}

.isotope-container+.isotope-container {
  margin-top: 64px;
}

<!doctype html>

<html>


<head>
  <title>Isotope</title>
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <div class="centered-component">
    <div class="filter-sidebar">
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="beige" />
                beige
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="green" />
                green
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="blue" />
                blue
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="orange" />
                orange
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="purple" />
                purple
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="pink" />
                pink
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="teal" />
                teal
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="yellow" />
                yellow
            </label>
      <label class="filter-item">
                <input type="checkbox"  class="filter-checkbox" value="black" />
                black
            </label>


    </div>

    <div class="content-block">
      <div class="isotope-container">
        <h2 class="heading">Category 1</h2>

        <ul class="products-container">
          <li class="products-item beige">
            <h2>beige</h2>
          </li>
          <li class="products-item green">
            <h2>green</h2>
          </li>

          <li class="products-item blue">
            <h2>blue</h2>
          </li>
          <li class="products-item orange">
            <h2>orange</h2>
          </li>
          <li class="products-item purple">
            <h2>purple</h2>
          </li>
          <li class="products-item pink">
            <h2>pink</h2>
          </li>
          <li class="products-item teal">
            <h2>teal</h2>
          </li>

          <li class="products-item yellow">
            <h2>yellow</h2>
          </li>
          <li class="products-item black    ">
            <h2>black</h2>
          </li>
          <li class="products-item beige">
            <h2>beige</h2>
          </li>

        </ul>
      </div>
      <div class="isotope-container">
        <h2 class="heading">Category 1</h2>

        <ul class="products-container">
          <li class="products-item beige">
            <h2>beige</h2>
          </li>
          <li class="products-item green">
            <h2>green</h2>
          </li>

          <li class="products-item blue">
            <h2>blue</h2>
          </li>
          <li class="products-item orange">
            <h2>orange</h2>
          </li>
          <li class="products-item purple">
            <h2>purple</h2>
          </li>
          <li class="products-item pink">
            <h2>pink</h2>
          </li>
          <li class="products-item teal">
            <h2>teal</h2>
          </li>

          <li class="products-item yellow">
            <h2>yellow</h2>
          </li>
          <li class="products-item black    ">
            <h2>black</h2>
          </li>
          <li class="products-item beige">
            <h2>beige</h2>
          </li>

        </ul>
      </div>


    </div>

  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  <script src="filter.js    "></script>


</body>

</html>

from Trying to integrate pagination on multiple isotope instance