Why this mouseover script doesn't work properly?
<p>I have written this script:</p>

<pre><code>var elms = document.getElementsByTagName('li');

for (var i = 0; i &lt; elms.length; i++){
  if (elms[i].className == 'liitem'){
  var delete_id = elms[i].id;
  elms[i].onmouseover = function(){  
    document.getElementById("delete-" + delete_id).style.display = "block";
    }
  elms[i].onmouseout =  function(){  
    document.getElementById("delete-" + delete_id).style.display = "none";
    }
   }
}​
</code></pre>

<p>HTML:</p>

<pre><code>&lt;li class="liitem" id="205"&gt;
    &lt;span&gt;
        &lt;a href="http://www.google.com/finance/portfolio?action=view&amp;pid=1" target="_blank"&gt;One:&lt;/a&gt; &lt;/span&gt;
    &lt;br&gt;
    &lt;ul&gt;&lt;li&gt;
        &lt;span&gt;&lt;a href="http://www.google.com" target="_blank"&gt;www.google.com&lt;/a&gt; &lt;/span&gt;&lt;span id="delete-205" style="float:right;font-size:11px;display:none;"&gt;&lt;a href=""&gt;delete&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/li&gt;&lt;br&gt;

&lt;li class="liitem" id="204"&gt;
    &lt;span&gt;
        &lt;a href="http://www.google.com/finance/portfolio?action=view&amp;pid=1" target="_blank"&gt;Two:&lt;/a&gt; &lt;/span&gt;
    &lt;br&gt;
    &lt;ul&gt;&lt;li&gt;
        &lt;span&gt;&lt;a href="http://www.google.com" target="_blank"&gt;www.google.com&lt;/a&gt; &lt;/span&gt;&lt;span id="delete-204" style="float:right;font-size:11px;display:none;"&gt;&lt;a href=""&gt;delete&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/li&gt;&lt;br&gt;

&lt;li class="liitem" id="203"&gt;
    &lt;span&gt;
        &lt;a href="http://www.google.com/finance/portfolio?action=view&amp;pid=1" target="_blank"&gt;Three:&lt;/a&gt; &lt;/span&gt;
    &lt;br&gt;
    &lt;ul&gt;&lt;li&gt;
        &lt;span&gt;&lt;a href="http://www.google.com" target="_blank"&gt;www.google.com&lt;/a&gt; &lt;/span&gt;&lt;span id="delete-203" style="float:right;font-size:11px;display:none;"&gt;&lt;a href=""&gt;delete&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/li&gt;&lt;br&gt;
​
</code></pre>

<p>Live demo: <a href="http://jsfiddle.net/5FBjm/1/" rel="nofollow">http://jsfiddle.net/5FBjm/1/</a></p>

<p>but it doesn't work properly.
I want that when there is mouseover on a certain <code>&lt;li&gt;</code> element of "liitem" class, 
then show "delete" link of that element (with the same ID).</p>

<p>In my script instead, appear only the last "delete". Why?</p>
