title: How to add and remove class from list items?
body: <p>I have designed a side nav for a website. How can I add a class on click of a nav item and remove it from the previous nav item? </p>
  
  <p>I have tried this solution right here: <a href="https://codepen.io/8eni/pen/MaGVrq" rel="nofollow noreferrer">https://codepen.io/8eni/pen/MaGVrq</a></p>
  
  <p>I have also tried a bit of jQuery. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;ul class="side_menu" id="sideMenu"&gt;
    &lt;li class="list_header"&gt;
      &lt;p class="list_p"&gt;REVIEWS&lt;/p&gt;
      &lt;ul class="sub_list"&gt;
        &lt;li class="sub_list_item" style="padding-top: 0px !important;"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-layer-group padding_right"&gt;&lt;/i&gt; All Reviews
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sub_list_item"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-thumbs-up padding_right"&gt;&lt;/i&gt; Best Albums
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sub_list_item"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-thumbs-down padding_right"&gt;&lt;/i&gt; Worst Albums
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="list_header"&gt;
      &lt;p class="list_p"&gt;GENRES&lt;/p&gt;
      &lt;ul class="sub_list"&gt;
        &lt;li class="sub_list_item"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-music padding_right"&gt;&lt;/i&gt; Dub
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sub_list_item"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-music padding_right"&gt;&lt;/i&gt; Electronica
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sub_list_item"&gt;
          &lt;a href="https://www.facebook.com" target="_blank" class="sub_list_link"&gt;
            &lt;i class="fas fa-music padding_right"&gt;&lt;/i&gt; Grundge
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want a class to be added to the particular item clicked by a user. Once another item is clicked, the previous item gets the class removed.</p>