Jquery : Function used to work but doesn't anymore

Question

I have been designing a website for school and coded the html and css. I don't know jquery so someone helped with that part. It was all working well. But later I added another function the displayImages one (with the help of another friend), that made part of the former code not working anymore. It is very likely a super simple error, but I have no clue how to solve it, so any help would be very appreciated ! the website : http://branded.housingcrisis.nl/

The two problems :

• On the top left part, a (word) counter should be displayed anytime one of the tags is selected. It used to work fine but now the counter remains in 'display:none' constantly. I suppose this is linked to the active class used a bit further in the code ?

• When a tag is selected or a button toggled, the grey text in the center is supposed to fade away a bit more (to turn into a lighter grey). This also doesn't work anymore, but it started not working before I added the image display thing.

jQuery code is here (I've put only 2 sidebarItems but there are 10-15 in the real code) I've left comments from the first friend that helped, since I guess it can be helpful.

function displayImages() {

  var x = document.getElementById("images-grid");
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
    var e = document.getElementsByClassName("image-toggle");
    e.classList.toggle("active");
  } else {
    x.style.display = "none";
  }
}


var sidebarElementType = 'h4';

var sidebarItems = [{
  title: 'students ',
  tag: 'students',
  count: 64,
}, {
  title: 'investors',
  tag: 'investors',
  count: 143,
}];

function createSideBarItems() {
  const sidebarSelector = document.querySelector('div.sidebar .items');
  sidebarItems.forEach((item) => {
    const newElement = document.createElement(sidebarElementType);
    newElement.setAttribute('data-tag', item.tag);
    newElement.classList.add('clickable-tag');
    newElement.innerText = item.title
    sidebarSelector.appendChild(newElement);
  });
}

function on() {
  document.getElementById("overlay-box").style.display = "block";
}

function off() {
  document.getElementById("overlay-box").style.display = "none";
}



/** ------ START: SIDEBAR CATEGORY HANDLERS ----- */

/* 
  Handles toggling of the category in the main text. First it will
  find all the existing active items and deactivate them, then it
  will only add the active class to the items of the newly selected
  category. This only will be activated if the clicked item on the
  left is in an active state (e.g. if the item was active and you
  click it again it will deactivate all the items along with itself)
*/
function toggleCategoryItem(className, isActive) {
  // remove all others
  document.querySelectorAll('.main span.active').forEach(el => {
    el.classList.remove('active');
  });

  document.querySelector('.main').classList.remove('has-active-category');

  // add active class if is activated
  if (isActive) {
    document.querySelector('.main').classList.add('has-active-category');
    document.querySelectorAll(`.main .${className}`).forEach(el => {
      el.classList.add('active');
    });
  }
}

/**
  This will find the counter element in the main text, and will
  find the provided category information based on the tag in the
  first argument when this function is called. First it will
  remove the active class (for the toggling effect), and then add
  it back again if there is a category active currently with the
  count of the active category set as innertext.
  
  Next it will find the non-addressed-overlay item, and will toggle
  this on if the newly found category has a count of 0.
*/
function adjustCount(item, isActive) {
  const counterEl = document.querySelector('.main .counter');
  counterEl.classList.remove('active');
  // find selected item by tag id, if found then update counter;
  const selectedItem = sidebarItems.find(i => i.tag === item);
  if (selectedItem) {
    counterEl.innerText = `Count: ${selectedItem.count}`;
  }

  const overlayEl = document.querySelector('.non-addressed-overlay');
  overlayEl.classList.remove('active');

  if (isActive) {
    counterEl.classList.add('active');

    if (selectedItem && selectedItem.count === 0) {
      overlayEl.classList.add('active');
    }
  }
}

/**
  This creates events listeners for the category toggles on the left.
  First it will find all the available items, and deactivate the
  existing category (if there was one). Afterwards it will toggle
  into the new [in]active state, and will also trigger the activation
  of items in the main text and update the count element in the main
  text.
*/
function createCategoryToggleListeners() {
  const tagSelectors = `${sidebarElementType}.clickable-tag`;
  document.querySelectorAll(tagSelectors).forEach(el => {

    el.addEventListener('click', function () {
      /** Remove all existing active for siblings classes */
      document.querySelectorAll(tagSelectors).forEach(item => {
        if (item.dataset.tag !== el.dataset.tag) {
          item.classList.remove('active');
        }
      });

      el.classList.toggle('active');
      const isActive = !!el.classList.contains('active');
      toggleCategoryItem(`${el.dataset.tag}-item`, isActive);
      adjustCount(el.dataset.tag, isActive);
    });
  });
}

/**
  This code will basically activate the toggles on the left and add
  the active class, and will do the same with the corresponding
  items in the main text. in this case key highlights with have the
  <span class="ti-key-high"> ... </span> tag surrounding it. Same
  applies for the language tages, however with 'ti-lang-tone' and
  'ti-lang-strat' attached to it.
*/

const toggleClasses = ['key-high', 'lang-tone', 'lang-strat', 'new-image'];

function activateToggle(toggleName) {
  const indicatorEl = document.querySelector(`.${toggleName}-indicator`);
  indicatorEl.classList.toggle('active');
  document.querySelector('.main').classList.toggle('has-active-toggle');

  document.querySelectorAll(`span.ti-${toggleName}`).forEach(el => {
    el.classList.toggle(`ti-${toggleName}-active`)
  });
}

function addToggleEventListeners() {
  // create event listeners for the toggles in the sidebar
  toggleClasses.forEach(item => {
    const element = document.querySelector(`.toggle-${item}`);
    if (element) {
      element.addEventListener('click', function () {
        activateToggle(item);
      })
    }
  });
}

document.addEventListener('DOMContentLoaded', function () {
  // create the items in the sidebar
  createSideBarItems();

  createCategoryToggleListeners();
  addToggleEventListeners();

});

Thanks a lot in advance for your help, I hope something can be done !