Issue with event listener

Question

I want to have action after click on the one of the four buttons. Unfortunately work only one and not really good. Please help !!! :( my menu should expand after clicking one of the four arrows. NIestetty at this point, the menu only expands after clicking one arrow, so I can't collapse it. After turning off the records in my loop. The menu expanded and collapsed, but all four sections expanded, not the one I was selecting. In addition, the Function continued to react only to one of the four arrows.

initAccordion(){
      const thisProduct=this;

      /* find the clickable trigger (the element that should react to clicking) */
      const clickableTrigger = document.querySelector(select.menuProduct.clickable);

      /* START: add event listener to clickable trigger on event click */
      clickableTrigger.addEventListener('click', function(event) {
      /* prevent default action for event */
        event.preventDefault();

        /* find active product (product that has active class) */
        const findActiveClass = document.querySelectorAll(select.all.menuProductsActive);
        
        /* if there is active product and it's not thisProduct.element, remove class active from it */
      for (let activeLink of findActiveClass){
          thisProduct.element = activeLink;
          activeLink.classList.remove(classNames.menuProduct.wrapperActive);
        }
        
        

        /* toggle active class on thisProduct.element */
        thisProduct.element.classList.toggle(classNames.menuProduct.wrapperActive);
      });
    }

<script id="template-menu-product" type="text/x-handlebars-template">
      <article class="product "> <!-- product -->

          <header class="product__header">
            <h3 class="product__name no-spacing">{{ name }} <i class="fas fa-chevron-down product__icon"></i></h3>
            <p class="product__base-price no-spacing">${{ price }}</p>
          </header>
          <div class="product__description"> <!-- description -->
            <p>{{{ description }}}</p>
          </div> <!-- .description -->
          <div class="product__wrapper"> <!-- details -->
            <form class="product__order">
              <ul class="product__params"> <!-- params -->
                {{#each params as |param paramId| }}
                {{#ifEquals type "checkboxes"}}
                <li> <!-- checkboxes -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  {{#each options}}
                  <div class="checkbox"> <!-- checkbox -->
                    <label>
                      <input type="checkbox" name="{{ paramId }}" value="{{ @key }}" id="{{ @key }}" {{#if default}}checked{{/if}}>
                      <span class="checkbox__checkmark"></span>
                      {{{ label }}} (${{{ price }}})
                    </label>
                  </div>
                  {{/each}}
                </li>
                {{/ifEquals}}
                {{#ifEquals type "radios"}}
                <li> <!-- radios -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  {{#each options}}
                  <div class="checkbox checkbox--round"> <!-- radio -->
                    <label>
                      {{{ label }}} (${{{ price }}})
                      <input type="radio" name="{{ paramId }}" value="{{ @key }}" id="{{ @key }}" {{#if default}}checked{{/if}}>
                      <span class="checkbox__checkmark"></span>
                    </label>
                  </div>
                  {{/each}}
                </li>
                {{/ifEquals}}
                {{#ifEquals type "select"}}
                <li> <!-- select -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  <select name="{{ paramId }}">
                    {{#each options}}
                    <option value="{{ @key }}" {{#if default}}selected{{/if}}>{{{ label }}} (${{{ price }}})</option>
                    {{/each}}
                  </select>
                </li>
                {{/ifEquals}}
                {{/each}}
              </ul>
              <div class="amount"> <!-- controls -->
                <div class="widget-amount"> <!-- widget-amount -->
                  <h3 class="product__params-title">Select quantity</h3>
                  <a class="btn-quantity" href="#less"><i class="fas fa-minus"></i></a>
                  <input type="text" name="amount" value="1">
                  <a class="btn-quantity" href="#more"><i class="fas fa-plus"></i></a>
                </div>
                <p class="product__total-price">
                  Total: $<span class="price">{{{ price }}}</span>
                </p>
                <div> <!-- add-to-cart -->
                  <a class="btn-primary" href="#add-to-cart">Add to cart</a>
                </div>
              </div>
            </form>
            <div class="product__images {{ class }}"> <!-- images -->
              {{#each images}}
              {{{ this }}}
              {{/each}}
            </div>
          </div>

      </article> <!-- .product -->
    </script>

Answer 1

If you want to add multiple EventListener in JS you have to .querySelectorAll() Elements and forEach them like so:

<button class="myButton">Click me</button>
<button class="myButton">Click me too</button>
<button class="myButton">Click me too again</button>
<button class="myButton">Click me too again also</button>

var myButtons = document.querySelectorAll("myButton");
myButtons.forEach(button=>{
 button.addEventListener("click", () => {
   // do something
 });
});