Jquery code for adding/deleting/scrolling list items behaving very strange
<p>This is the piece of code that's in charge of scrolling my vertical list of items.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){

    var first = 0;
    var speed = 700;
    var pause = 8000;

        function removeFirst(){
            first = $('ul#twitter_update_list li:first').html();
            $('ul#twitter_update_list li:first')
            .animate({opacity: 0}, speed)
            .fadeOut('slow', function() {$(this).remove();});
            addLast(first);
        }

        function addLast(first){
            last = '&lt;li style="display:none"&gt;'+first+'&lt;/li&gt;';
            $('ul#twitter_update_list').append(last)
            $('ul#twitter_update_list li:last')
            .animate({opacity: 1}, speed)
            .fadeIn('slow')
        }

    interval = setInterval(removeFirst, pause);
});
&lt;/script&gt;
</code></pre>

<p>At the first glance, everything seems to work flawlessly. But after about 10 minutes, the list items start to add up (as if they're not getting deleted). After about 15 minutes, there's like 30 of list items (initially, there were only 5). </p>

<p>The content is being inserted in by ajax once, at the document load. I don't think this is relevant so I didn't include that code.</p>
