Use vanilla javascript to add / remove class to a different element after clicking on another one

document.addEventListener("DOMContentLoaded", function() {  var faqContainers = document.getElementsByClassName('faq-container');  var faqToggle = document.getElementsByTagName('body')[0];  for (var i = 0; i < faqContainers.length; i++) {    faqContainers[i].addEventListener('click', function() {      if (faqToggle.classList.contains('faq-display')) {        faqToggle.classList.remove('faq-display');        // alert("remove faq display!");      } else {        faqToggle.classList.add('faq-display');        // alert("add faq display!");      }    });  }});

You need to loop:

[...document.querySelectorAll('.faq-container')] // spread is compatible with older EDGE  .forEach(faq => faq.addEventListener('click', () =>   document.querySelector('body').classList.toggle('faq-display')))

NOTE: if you have MANY of these divs, you are better off having one event handler for a parent and test what was clicked.

document.getElementById('faqContainerParent')  .addEventListener('click', e => {  const tgt = e.target;  if (tgt.matches(".faq-container") || tgt.closest("div.faq-container")) { // is it the faq-container or one of the descendants    document.querySelector('body').classList.toggle('faq-display')  }});