title: Javascript consecutive click event on same button to change css
body: <p>I would like to create a click event on a check box and add a CSS class. I can use &quot;classList.toggle&quot; to add and remove the a CSS class by clicking the button 2 times.
  This is what I would like to do. When I click the checkbox for the first, I would like to add &quot;xyz&quot; class and when I click the same check box, I would like to add &quot;abc&quot; class and remove the &quot;xyz&quot; class.</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>  const openModal = document.getElementById('mark-as-gift');
    const modalBg = document.querySelector('.addtnew');
    
    openModal.addEventListener('click', openModalBtn);
   
    function openModalBtn() {
       modalBg.classList.add('menscart2');
        
    }</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my startet JS code. Thanks for the help</p>