CMS dynamic search bar breaks my CMS category filter buttons

Design help Custom code
1

Hi all,

I have built up a page that uses a CMS library and I’ve followed a couple tutorials to include category filter buttons and a CMS library search bar. Here is my read-only page

The issue is in my custom code below, adding the code used for the search bar causes the filter buttons to stop working. I’ve narrowed it down and it seems the line <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
is the cause of the problem (although it needs to be one of the first scripts in order to make the search bar work). I’ve been experimenting with code ordering and starting the filter buttons from scratch, but have not been able to figure it out yet. Any advice is greatly appreciated.

<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>


<style>
  body > div {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
  }
</style>

<!--- // 1) Connecting MixItUp JS library using public CDN link --->

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>

<script>

  // 2) Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
    if (!str) {
      str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
      .replace(/ /g, "-")
      .toLowerCase()
      .trim();
  };

  // 3) Creating dynamic elements classes from its categories for filtering:
  var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    elem.parentElement.parentElement.classList.add(className);
  });

  // 4) Creating custom data-date attributes from blog dates:
  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
  });

  // 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
  var containerEl = document.querySelector('.collection-list');

  // 6) Call the MixitUp plugin
  mixitup(containerEl);

</script>

<!---Scripts to make the search bar work --->

<script>
  // document ready wrapper
  $(document).ready(function() {

    // disable search from submitting
    $('#quicksearch').on('keyup keypress', function(e) {
      const keyCode = e.keyCode || e.which;
      if (keyCode === 13) {
        e.preventDefault();
        return false;
      }
    });
    // find all filter buttons
    const filterToggles = document.querySelectorAll('[data-filter]');

    // go over each filter button
    filterToggles.forEach(function(toggle) {

      let attrVal = toggle.getAttribute(['data-filter']);
      // find the filter attr
      let newVal = attrVal.toLowerCase().replace(' ', '-');
      // hyphenate filter attr val
      toggle.setAttribute('data-filter', newVal);
      // set filter attr with new val

    });

    // quick search regex
    let qsRegex;

    // init Isotope
    const $grid = $('.grid').isotope({
      itemSelector: '.w-dyn-item',
      stagger: 30,
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
        return searchResult;
      }
    });

    // reveal all items after init
    const $items = $grid.find('.w-dyn-item');
    $grid.addClass('is-showing-items').isotope('revealItemElements', $items);


    // use value of search field to filter
    const $quicksearch = $('#quicksearch').keyup(debounce(function() {
      qsRegex = new RegExp($quicksearch.val(), 'gi');
      $grid.isotope();
    }));


    // debounce so filtering doesn't happen every millisecond
    function debounce(fn, threshold) {
      let timeout;
      return function debounced() {
        if (timeout) {
          clearTimeout(timeout);
        }

        function delayed() {
          fn();
          timeout = null;
        }
        setTimeout(delayed, threshold || 100);
      };
    };
  });
</script>