How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?
<p>I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.  </p>

<p>The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements</p>

<pre><code>           $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

            $("li.test a").click(function() {
                $(this).toggleClass("active");
            });


            $("li.test a").click(function() {
                $(this).toggleClass("active");

            });
</code></pre>

<p>HTML</p>

<pre><code>&lt;li class="test1"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;

&lt;li class="test1"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;

&lt;li class="test1"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;

&lt;li class="test2"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;

&lt;li class="test2"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;

&lt;li class="test2"&gt;
 &lt;a href="#" class=""&gt;
&lt;/li&gt;
</code></pre>