title: Changing Background Colour of Button - Change when clicked, remove when another button is clicked
body: <p>First time poster - have tried to find solution elsewhere but not able to.</p>
  <p>I have created a grid of buttons. Upon clicking button 1, I want the background to change to a preset colour. When another button is clicked (button 2), I would like the button(1) background to change back to the original, followed by the newly clicked button (button 2) to take on the preset colour.</p>
  <p>Here is the HTML written so far:</p>
  <pre><code>    &lt;div class=&quot;tip-select&quot;&gt;
        &lt;p class=&quot;ttext&quot;&gt;Select Tip %&lt;/p&gt;
        &lt;div class=&quot;tip&quot;&gt;
          &lt;div class=&quot;five-tip btn tips&quot;&gt;5%&lt;/div&gt;
          &lt;div class=&quot;ten-tip btn tips&quot;&gt;10%&lt;/div&gt;
          &lt;div class=&quot;fifteen-tip btn active-tip tips&quot;&gt;15%&lt;/div&gt;
          &lt;div class=&quot;twentyfive-tip btn tips&quot;&gt;25%&lt;/div&gt;
          &lt;div class=&quot;fifty-tip btn tips&quot;&gt;50%&lt;/div&gt;
          &lt;div class=&quot;custom btn tips&quot;&gt;Custom&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Here is the Javascript written so far:</p>
  <pre><code>tips.forEach(function (mov) {
    mov.addEventListener(&quot;click&quot;, handleClick);
  });
  
  
  function handleClick(event) {
  tips.forEach(function (val) {
    if (event.target.innerHTMl == val.innerHTMl) {
      val.classList.add(&quot;active-tip&quot;);
      console.log(val);
    }
    });
  }
  </code></pre>
  <p>Here is the current design for reference:</p>
  <p><img src="https://i.stack.imgur.com/elMwSm.png" alt="Grid to change" /></p>
  <p>My thought is to iterate through the nodelist and assign active-tip as a class based on the button selected. At the moment though all of the buttons are changing colour when clicked.</p>