toggle switch by adding and removing Class with Jquery
<p>I'm trying to make a toggle switch and I can not use toggleClass because with #bar1 I'm using SVG. With SVG I read that I have to use Attributes instead of addClass(). My idea is to click on a div to add a new class and remove the current class. The first click of the code works but I am unable to revert back to the original class with the second click. Any suggestions on what I could be doing wrong? </p>

<pre><code>$(".hamburger-container").click(function() {
  $("#bar1").attr('class', 'bar1');
  $(this).addClass('toggle');
  $(this).removeClass('hamburger-container');
});

$(".toggle").click(function() {
  $("#bar1").removeAttr('class', 'bar1');
  $(this).addClass('hamburger-container');
  $(this).removeClass('toggle');
});
</code></pre>

<p>The HTML</p>

<pre><code>     &lt;div class ="pull-right hamburger-container"&gt;

               &lt;svg enable-background="new 0 0 32 32" height="32px" id="hamburger" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;&lt;g id="Menu"&gt;&lt;path class ="bar" id="bar1" d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" fill="#121313"/&gt;&lt;path class="bar" id="bar2" d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z" fill="#121313"/&gt;&lt;path class="bar" id="bar3" d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z" fill="#121313"/&gt;&lt;/g&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;g/&gt;&lt;/svg&gt;
            &lt;/div&gt;
</code></pre>

<p>The CSS</p>

<pre><code>      .toggle {
     width: 50px;
     height: 30px;
     display: inline-block;
    position: relative;
    z-index: 1200;
    cursor:pointer;
    margin-right: 20px;
     margin-top: 10px;
     }

   .hamburger-container {
    width: 50px;
    height: 30px;
    display: inline-block;
     position: relative;
    z-index: 1020;
     cursor:pointer;
      margin-right: 20px;
     margin-top: 10px;
     }
</code></pre>