problem with jquery each
<p>I'm trying to make a dynamic list with jquery. What i have is an <code>ul</code> element that contains a link and a sub <code>ul</code> element. Like this:</p>

<pre><code>&lt;div id="new_list"&gt;&lt;/div&gt;
&lt;ul id="old_list" class="listview"&gt;
    &lt;li&gt;
      &lt;a class="list" href="#"&gt;List I&lt;/a&gt;
      &lt;ul class="sub"&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="list" href="#"&gt;List II&lt;/a&gt;
      &lt;ul class="sub"&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What i want to do with this list is:</p>

<p>when user clicks any of these links, the sub <code>ul</code> element's html( which is the sibling of the link that is just clicked ) should be copied to new_list div and then made visible.
Here is the code:</p>

<pre><code>$("a.list").each(function() {
    $(this).click(function() {
      var listToShow = $(this).siblings("ul");
      $("#new_list").html(listToShow);
      $("#old_list").hide();
      $("#new_list").show();
      return false;
    });
});
</code></pre>

<p>This code works for all the links for the first time, but when i click the same link again an empty list comes up.</p>

<p>What am i missing?</p>

<p>Thanks.</p>
