title: Navigation with multiple items, add class and remove class on click
body: <p>I have a navigation with 6 items, basically I want to add a class of active-nav to whichever li is clicked, which I can then use to fire an animation on that particular li. Although it's easy to add that class, I need that class to be removed when another li is clicked, and the class to then be added to the newly clicked li.</p>
  
  <pre><code>&lt;nav&gt;
    &lt;div id="navigation"&gt;
      &lt;ul&gt;
        &lt;li id="button-1"&gt;&lt;button&gt;1&lt;/button&gt;&lt;/li&gt;
        &lt;li id="button-2"&gt;&lt;button&gt;2&lt;/button&gt;&lt;/li&gt;
        &lt;li id="button-3"&gt;&lt;button&gt;3&lt;/button&gt;&lt;/li&gt;
        &lt;li id="button-4"&gt;&lt;button&gt;4&lt;/button&gt;&lt;/li&gt;
        &lt;li id="button-5"&gt;&lt;button&gt;5&lt;/button&gt;&lt;/li&gt;
        &lt;li id="button-6"&gt;&lt;button&gt;6&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="outline"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Basically, if i click #button-1, I need to add an active class to that, but if I then click #button-4, I need to remove the class from #button-1 and now add it to #button-4</p>