title: How to add class and remove class in jquery?
body: <p>I'm trying to make a button to turn my page to dark mode and I'm having problem that when I change my page to dark mode and then change it to light mode it workded only first time but i tried to change it to dark mode again it not doing anything</p>
  <p>here is my <code>darkmode.js</code>:</p>
  <pre><code>const active = &quot;light&quot;;
  
  $(&quot;#btn-darkmode&quot;).click(function () {
    this.active = &quot;dark&quot;;
    if (this.active === &quot;dark&quot;) {
      $(&quot;.container-fluid&quot;).addClass(&quot;dark-mode&quot;);
      console.log(&quot;dark&quot;);
    }
    $(this).click(function () {
      this.active = &quot;light&quot;;
      if (this.active === &quot;light&quot;)
        $(&quot;.container-fluid&quot;).removeClass(&quot;dark-mode&quot;);
      console.log(&quot;light&quot;);
    });
  });
  </code></pre>
  <p>and here is my <code>index.html</code>:</p>
  <pre><code>&lt;span&gt;Light&lt;/span&gt;
  &lt;label class=&quot;switch&quot;&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;btn-darkmode&quot;&gt;
    &lt;span class=&quot;slider round&quot;&gt;&lt;/span&gt;
  &lt;/label&gt;
  &lt;span&gt;Dark&lt;/span&gt;
  </code></pre>
  <p>Update <code>index.css</code>:</p>
  <pre><code>.dark-mode {
    background-color: black;
    color: white;
  }
  </code></pre>