title: Keep an element highlighted when clicked
body: <p>Following is my code-</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>$("li span").click(function() {
     $("li span").each(function() {
            $(this).css("background-color", "transparent");
     });
    $(this).css("background-color", "#ff3300");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight {
    background: green;
  }
  span {
    display: block;
  }
       </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="left-menu-inner scroll-pane"&gt;
    &lt;ul class="left-menu-list left-menu-list-root list-unstyled"&gt;
        &lt;li class="left-menu-list-active"&gt;
            &lt;div class="left-menu-link"&gt;
            &lt;a href="dashboard"&gt;
              &lt;i class="left-menu-link-icon icmn-home2"&gt;&lt;!-- --&gt;&lt;/i&gt;
              &lt;span class="menu-top-hidden"&gt;Dashboard&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, I tried another code as follows-</p>
  
  <pre><code>&lt;script&gt;
  // Add active class to the current button (highlight it)
  var header = document.getElementById("myDIV");
  var btns = header.getElementsByClassName("btn");
  for (var i = 0; i &lt; btns.length; i++) {
   btns[i].addEventListener("click", function() {
     var current = document.getElementsByClassName("active");
     current[0].className = current[0].className.replace(" active", "");
     this.className += " active";
   });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But both of the codes are only highlighting the label on mouseover but not keeping highlighted on onclick. </p>