I have just recently started playing around in React and I now want to add own JS for an JS accordion.

const accordionItemHeaders = 
document.querySelectorAll(".accordion_item_title");

accordionItemHeaders.forEach(accordionItemHeader => {
 accordionItemHeader.addEventListener("click", event => {
  accordionItemHeader.classList.toggle("active");
   });
    });

For testing purposes, I have tried inserting the constant right into a jsx container file. It works on and off after saving the edit in VS Code, but stops eventually. Plus, I have two accordions next to each other (same classNames...) and when the script does work, it does only work with one.

This is probably very basic, but I would very much appreciate an answer as I am a complete noob at this point.

Thanks!