using prepend and remove
<p>I am using <code>.prepend()</code> and <code>.remove()</code> to show menu items in the order a user clicks them.</p>

<pre><code>$(document).ready(function()
{
    $('#item1').click(function() 
    {

        $('#item1_content').remove();

        $('.menu_item_content').prepend('&lt;div id="item1_content"&gt;The Box For Menu Item One&lt;/div&gt;');

    });

    $('#item2').click(function() 
    {

        $('#item2_content').remove();

        $('.menu_item_content').prepend('&lt;div id="item2_content"&gt;The Box For Menu Item Two&lt;/div&gt;');

    });
});
</code></pre>

<p>I use <code>.remove()</code> to remove the item if it already exists and the <code>.prepend()</code> to put it at the top of the container <code>div</code> </p>

<p>In this way the user can show as many or as few of the menu items as they want at once and in the order they click them but duplicates should not appear.</p>

<p>For example. The user could click  MenuItem3 then MenuItem1 Then MenuItem2 and the items would display below:</p>

<p>Item2
Item1
Item3</p>

<p>The first half of my script works #item1 but #item2 does not, it just keeps making duplicates.</p>

<p>Also if I do #item1 then #item2 then #item1 again I get a duplicate.</p>

<p>What am I doing wrong here? Is there a better way to do this?</p>
