title: How to toggle multiple elements with same class name on click
body: <p>How can I change the color from green to red to all the line when I click the toggle button . It doesn't seem to work with same class name if I use <strong>getElementsbyClassName</strong> or <strong>querySelectorAll</strong> , only the first line color changes if I use <strong>querySelector</strong> . All the line color changes if I give each paragraph a different id or class name .So basically how can I toggle multiple elements with same class name (in this case class name is <strong>'para'</strong>) on click ? Here is my <strong>codepen</strong> link - <a href="https://codepen.io/fahim04blue/pen/KKNvOZe" rel="nofollow noreferrer">https://codepen.io/fahim04blue/pen/KKNvOZe</a></p>
  <p><strong>html</strong>-</p>
  <pre><code>&lt;button id='btn' type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;toggle&lt;/button&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;
    &lt;p class=&quot;para&quot;&gt;Paragraph 1&lt;/p&gt;
    &lt;p class=&quot;para&quot;&gt;Paragraph 2&lt;/p&gt;
    &lt;p class=&quot;para&quot;&gt;Paragraph 3&lt;/p&gt;
    &lt;p class=&quot;para&quot;&gt;Paragraph 4&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong> -</p>
  <pre><code>.para{
    background-color:green;
  }
  
  .para.red{
    background-color:red;
  }
  </code></pre>
  <p><strong>Vanilla JS</strong></p>
  <pre><code>const btn = document.getElementById('btn');
  const para = document.querySelector('.para');
  
  btn.addEventListener('click',()=&gt;{
    para.classList.toggle('red');
  })
  </code></pre>