Display the selected/active link in a div using jQuery
<p>I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).</p>

<p>I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.</p>

<p>I hope that makes sense.</p>

<p>This is the HTML menu</p>

<pre><code>&lt;div id="mgf_165" class="mg_filter mg_new_filters"&gt;

    &lt;a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)"&gt;Bathrooms Sinks&lt;/a&gt;

    &lt;a id="164" rel="164" class="mgf_id_164  mgf  left_menu" href="javascript:void(0)"&gt;Bowed&lt;/a&gt;

&lt;/div&gt;
</code></pre>

<p>This is the jQuery and the div where I wanna display the text values.</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function(){
    console.log('test');
    jQuery("a.left_menu").click(function(){
         var txt = jQuery("a.left_menu").text();
         //$(this).attr('rel');
         jQuery("#category").append(txt);
    });
});
&lt;/script&gt;

&lt;div id="category"&gt;
&lt;/div&gt;
</code></pre>

<p>At the moment when I click on, say, "Bowed", this displays in the div</p>

<blockquote>
  <p>Bathrooms SinksBowed</p>
</blockquote>

<p>And if I click again on "Bathroom Sinks", the same thing repeats</p>

<blockquote>
  <p>Bathrooms SinksBowedBathrooms SinksBowed</p>
</blockquote>

<p>How can I deal with that? And did I follow the correct logic here?</p>