title: CSS Selector for all the buttons with class
body: <p>I am making a model for my landing page and want to trigger a single model for by multiple buttons. But I am unable to to use every button, it only works for the first button.<br>
  <br>Markup</p>
  
  <pre><code> &lt;button class="trigger" class="pricing_button single_button" &gt;BUY&lt;/button&gt;
  </code></pre>
  
  <p><br>
  JS Script</p>
  
  <pre><code>var modal = document.querySelector(".modal");
      var trigger = document.querySelector(".trigger");
      var closeButton = document.querySelector(".close-button");
  
      function toggleModal() {
          modal.classList.toggle("show-modal");
      }
  
      function windowOnClick(event) {
          if (event.target === modal) {
              toggleModal();
          }
      }
      trigger.addEventListener("click", toggleModal);
      closeButton.addEventListener("click", toggleModal);
      window.addEventListener("click", windowOnClick);
  </code></pre>
  
  <p>My code is only working for the first button. I checked online and found <code>document.querySelectorAll</code> but it also doesn't solve the problem.</p>