jQuery: Add an index number to a cloned list element
<p>this is almost right, it is not a very complicated question...</p>

<p>I have a <code>&lt;ul&gt;</code> that I can add and delete <code>&lt;li&gt;</code>'s from.</p>

<p>Working example is here.</p>

<p><a href="http://jsfiddle.net/6ELzf/1/" rel="nofollow">http://jsfiddle.net/6ELzf/1/</a></p>

<p>When I add or delete a <code>&lt;li&gt;</code>, I would like to reset the span.number's...</p>

<p>So if I have 3 list items:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;span class="number"&gt;1&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="number"&gt;2&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="number"&gt;3&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And I delete the first one, I would like it to display:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;span class="number"&gt;1&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="number"&gt;2&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Not:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;span class="number"&gt;2&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="number"&gt;3&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Any thoughts on how to update this...</p>

<pre><code>function index_list() {
  $("#thelist &gt; li").each(function(i){
      $(this).find(".number").html((i + 1));
    });
}
</code></pre>
