adding and removing multiple div dynamically
<p>Im a bit stuck. this is what it suppose to do. When you mouse over a menu item it slides out the next menu and adds a new vertical div which must be 5px wide in between the current div and the next but i can't add and remove the div. i have a condition that checks that the div is not the last on I've commented it in my code if you can help it would be appreciated. here is a sample <a href="http://jsfiddle.net/gygk7/" rel="nofollow">jsFiddle</a></p>

<pre><code>    $(document).ready(function () {
        $('.menu-item').mouseenter(function () {
            var curr = $(this).closest('.container');
            var next = curr.next('.container');

            next.animate({ 'left': curr.position().left + curr.width() + 5 });

            if(curr.index() &lt; ($('.container').length - 1)){
                //here i need to add and remove a &lt;/div class="spacer"&gt;&lt;/div&gt; to the right side
                of the current(var curr) div
            }

            var $index = curr.index() + 1;
            $('.container:nth-child(' + $index + ')').nextAll().each(function () {

                $(this).animate({ 'left': curr.position().left + curr.width() + 5 });

            });

        });
    });

.spacer
    {
        background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;
    }

&lt;table border="2" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px  "&gt;
                &lt;div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua"&gt;
                    &lt;div class="menu-item"&gt;Menu Item 1&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 2&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 3&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue"&gt;
                    &lt;div class="menu-item"&gt;Menu Item 4&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 5&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 6&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia"&gt;
                    &lt;div class="menu-item"&gt;Menu Item 7&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 8&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 9&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left"&gt;
                    &lt;div class="menu-item"&gt;Menu Item 10&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 11&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 12&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left"&gt;
                    &lt;div class="menu-item"&gt;Menu Item 10&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 11&lt;/div&gt;
                    &lt;div class="menu-item"&gt;Menu Item 12&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
