title: Remove ACTIVE classes from all other buttons when I click an other button in vanilla javascript
body: <p>I want to assign "active" to a button which I clicked on and remove active from the other buttons when I do so, I want to do this in Vanilla JS since I want to practice my skills. I have tried out similar issues on SO, however I can't get my code to work.</p>
  
  <p>Ultimately I want to create a gallery filter for images taken from my DB in PHP which I added to my code as seen bellow based on button which is acive I want to show / hide the categories. The image receive a <code>class = someCategory</code> from the <code>image_category</code> column in my DB.</p>
  
  <p>Help is appreciated.</p>
  
  <p>I've tried to take similar issues under consideration. But I failed to make it work.</p>
  
  <p><a href="https://stackoverflow.com/questions/37334613/vanilla-js-remove-class-from-all-other-elements-besides-active-class">Vanilla JS remove class from all other elements besides &#39;active&#39; class</a></p>
  
  <p><strong>HTML &amp; PHP CODE:</strong></p>
  
  <pre><code>     &lt;div id="category-buttons"&gt;
      &lt;h5&gt;Choose image category&lt;/h5&gt;
        &lt;button id="All" class="catgory-button active" &gt;All Categories&lt;/button&gt;
        &lt;button id="CNC_Machining_button" class="catgory-button"&gt;CNC_Machining&lt;/button&gt;
        &lt;button id="HP_Die_Casting" class="catgory-button"&gt;HP Die Casting&lt;/button&gt;
        &lt;button id="Iron_Casting" class="catgory-button"&gt;Iron Casting&lt;/button&gt;
        &lt;button id="Steel_Casting" class="catgory-button"&gt;Steel Casting&lt;/button&gt;
        &lt;button id="Precision_Casting" class="catgory-button"&gt;Precision Casting&lt;/button&gt;
        &lt;button id="Aluminium_Casting" class="catgory-button"&gt;Aluminum Casting&lt;/button&gt;
      &lt;/div&gt;
  
  
  &lt;section class="gallery-links"&gt;
  &lt;div class="wrapper"&gt;
  
    &lt;h2 class="product-gallery-title"&gt;Product Gallery&lt;/h2&gt;
  
    &lt;div class="gallery-container"&gt;
      &lt;?php
      include_once 'includes/dbh.inc.php';
  
      $sql = 'SELECT * FROM gallery ORDER BY orderGallery DESC';
      $stmt = mysqli_stmt_init($conn);
      if (!mysqli_stmt_prepare($stmt,$sql)) {
        echo 'SQL statement failed!';
      } else {
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
  
        while ($row = mysqli_fetch_assoc($result)) {
          //what's echoed out by the database
  
          echo '  &lt;a class="images '.$row["image_category"].'" style="background-repeat:no-repeat; background-image: url(gallery/'.$row["imgFullNameGallery"].')"&gt;
                  &lt;div class="color-overlay"&gt;
                  &lt;h3&gt;'.$row["titleGallery"].'&lt;/h3&gt;
                  &lt;p&gt;'.$row["descGallery"].'&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/a&gt;';
        }
      }
  
  
      ?&gt;  
  
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;?php
  </code></pre>
  
  <p><strong>JS Code:</strong></p>
  
  <pre><code>    let btns = Array.from(document.querySelectorAll('.category-button'));
  
      const handleClick = (e) =&gt; {
        e.preventDefault();
        btns.forEach(node =&gt; {
          node.classList.remove('active');
        });
        e.currentTarget.classList.add('active');
      }
  
      btns.forEach(node =&gt; {
        node.addEventListener('click', handleClick)
      });
  </code></pre>
  
  <p><strong>Relevant CSS CODE:</strong></p>
  
  <pre><code>    #category-buttons {
      float: left;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      width: 12.5%;
      margin: 10vh 10px;
      }
  
      .category-button {
      padding: 20px;
      margin: 2px 0;;
      color: white;
      background: rgb(153, 124, 124);
  
      }
  
      .product-gallery-title {
      text-transform: uppercase;
      }
  
      .wrapper {
      text-align: center;
      width: 65%;
      margin: auto;
      }
  
      .gallery-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 13px;
      margin: auto;
      width: 100%;
      background: rgb(236, 236, 236);
      justify-content: center;
      }
  
      .images{
      height: 300px;
      width: 300px;
      max-width: 300px;
      max-height: 300px;
      text-decoration: none;
      }
  </code></pre>
  
  <p><strong>Expected Result:</strong>
  On click, button receives <code>active</code> class and other buttons in scope lose them.</p>