title: horizontal menu adding divs dynamically
body: <p>Hi im trying to add divs that are red between my sliding panels . My menu animates when you moueenter the menu item and a panel slides out, but between each panel i want to add/remove a panel dymaically. when i say remove i mean when you go backwards through the menu and the sliding panel retracts you then remove the last red div and when you mouseenter a menu item and the sliding panels exapand you add one red div(5px wide doesn't matter about the height) here is what i have so far. <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>