title: addEventListener multiple use
body: <p>I am making an application according to the youtube tutorial. I already know what the correct solution looks like, but I don't know why such a code does not work. It is only executed once. I check 'Inspector' in the browser and there it shows that the second div got active class, but the second click doesn't work.</p>
  <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>document.querySelector('.emoji').addEventListener('click', function() {
    document.querySelector('.open').classList.toggle('active');
    document.querySelector('.closed').classList.toggle('active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .emoji {
    text-align: center;
    font-size: 20rem;
    cursor: pointer;
    display: none;
  }
  
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .active {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- emoji no evil 
          emoji monkey  --&gt;
  
  &lt;div class="emoji open active"&gt;&lt;/div&gt;
  &lt;div class="emoji closed"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And now why this solution doesn't work?</p>
  <p>I think that i have 2 elements with 'emoji' class so this should work. Today I tried create calculator app and has same problem . Only first button works when i clicked on it. I know that correct solution is :</p>
  <pre class="lang-js prettyprint-override"><code>    document.querySelector('.open').addEventListener('click', function () {
        document.querySelector('.open').classList.toggle('active');
        document.querySelector('.closed').classList.toggle('active');
      });
      
      document.querySelector('.closed').addEventListener('click', function () {
        document.querySelector('.closed').classList.toggle('active');
        document.querySelector('.open').classList.toggle('active');
      });
  </code></pre>
  <p>But i dont understand why first solution is wrong. Please could you explain.</p>