Why is this javascript inserting two spinner images?
<pre><code>// javascript for ajax pagination//

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
 }
})
</code></pre>

<p>Why is this script inserting two spinner images?</p>

<p>here is the html</p>

<pre><code> &lt;div style="margin-top:25px;"&gt;
      &lt;div class="pagination ajax"&gt;
           &lt;span class="disabled prev_page"&gt;&amp;laquo; Previous&lt;/span&gt; 
           &lt;span class="current"&gt;1&lt;/span&gt; 
           &lt;a href="/posts?page=2" rel="next"&gt;2&lt;/a&gt; 
           &lt;a href="/posts?page=3"&gt;3&lt;/a&gt; 
           &lt;a href="/posts?page=2" class="next_page" rel="next"&gt;Next &amp;raquo;&lt;/a&gt;
      &lt;/div&gt;
      &lt;br style="clear:both;"/&gt;
 &lt;/div&gt;
</code></pre>
