title: How to add css class to an element with EventListener
body: <p>I am trying to change the class of some element to do a variable element (like classic/plus/premium).</p>
  <p>I already setup 3 buttons with the ID : classic-button, plus-button and premium-button.</p>
  <p>Here is my code for JavaScript :</p>
  <pre><code>&lt;script&gt;
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById(&quot;classic-button&quot;).addEventListener('click',function ()
      {
          $('#classic-price').addClass('show').removeClass('hide')
      }  ); 
  
      document.getElementById(&quot;plus-button&quot;).addEventListener('click',function ()
      {
          $('#plus-price').addClass('show').removeClass('hide')
      }  ); 
  
      document.getElementById(&quot;premium-button&quot;).addEventListener('click',function ()
      {
          $('#premium-price').addClass('show').removeClass('hide')
          console.log(&quot;salut ça marche&quot;)
      }  ); 
  });
  &lt;/script&gt;
  </code></pre>
  <p>And I want my elements #***-price to appear when I click on its button.</p>
  <p>Here's my CSS class for hide and show :</p>
  <pre><code>.show{
      visibility:visible;
      position:static;
  }
  .hide{
      position: absolute;
      visibility: hidden;
  }
  </code></pre>
  <p>I must add that I can't add onclick attribute in my button because it is not properly a button.</p>
  <p>But my console told me that <code>$('#plus-price').addClass('show').removeClass('hide')</code> is not a function, what am I supposed to do?</p>