jQuery click variable scope issue
<p>I set up this fiddle with an issue I am encountering. I need the script to hide the button that was clicked after the animation is complete. What is the correct way to do this?</p>

<p><a href="http://jsfiddle.net/digitalaxis/utJKU/" rel="nofollow">http://jsfiddle.net/digitalaxis/utJKU/</a></p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
    &lt;a id='button1' href="#"&gt;Button 1&lt;/a&gt;
    &lt;a id='button2' href="#"&gt;Button 2&lt;/a&gt;
    &lt;a id='button3' href="#"&gt;Button 3&lt;/a&gt;
    &lt;a id='button4' href="#"&gt;Button 4&lt;/a&gt;
    &lt;a id='button5' href="#"&gt;Button 5&lt;/a&gt;
&lt;/div&gt;
&lt;div id="box"&gt;
    Some element
&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>$('a[id^="button"]').click(function() {    
    $('#box').hide('slow', function() {        
        $('a').hide('slow');
    });
});
</code></pre>
