title: Toggle attributes between Two Buttons with a click event listener
body: <p>I have a container with 2 button elements inside of them. Both buttons have the same class name but different attribute values (<code>size</code>).</p>
  <p>I have wrapped the buttons in a forEach property and added a click event listener.</p>
  <p>Once the event is executed, I am using <code>setAttribute('active', '')</code> on the selected button, but when the other is clicked, it should remove the attribute from the old event, and add it to the current one.</p>
  <h3>Current situation:</h3>
  <p>It sets an <code>active</code> attribute on both buttons, but doesn't remove the inactive ones.</p>
  <h3>Expected result:</h3>
  <p>The <code>active</code> attribute should be only enabled when I click on the selected button.</p>
  <h3>Here's a basic snippet:</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const getButtons = document.querySelectorAll('.test');
  
  getButtons.forEach(button =&gt; {
    button.addEventListener('click', () =&gt; {
      button.setAttribute('active', '')
      console.log(button.getAttribute('size'))
      });
    })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
    &lt;button class="test" size="10"&gt;Press Me 10&lt;/button&gt;
    &lt;button class="test" size="20"&gt;Press Me 20&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>