title: Adding class to multiple elements with the same class
body: <p>I'm used to use jQuery in my projects but I want to do this using only plain JS, I tried this: </p>
  
  <pre><code>//Open overlay
  document.querySelector('.gallery__img').addEventListener('click', function () {
    document.querySelector('.overlay').classList.add('showOverlay');
  });
  
  // Close overlay
  document.querySelector('#closeOverlay').addEventListener('click', function() {
    document.querySelector('.overlay').classList.remove('showOverlay');
  });
  </code></pre>
  
  <p>But it didn't work, how naive of me thinking it'll be as easy as using jQuery... With the code above only when I click the first element the class is added, but it doesn't work with the rest.</p>
  
  <p>the HTMl looks like this:</p>
  
  <pre><code>&lt;div class="gallery"&gt;
    &lt;img src="img/hg-1.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-2.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-3.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-4.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-5.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-6.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-7.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-8.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-9.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-10.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-11.jpg" alt="Interior view" class="gallery__img"&gt;
    &lt;img src="img/hg-12.jpg" alt="Interior view" class="gallery__img"&gt;
  &lt;/div&gt;
  </code></pre>