jquery: $(this) confusion
<p>I have 3 buttons. I'm trying to get it so that when one is clicked it gets a class of 'this-button' and the class is removed from others.</p>

<pre><code>  &lt;button id="button1"&gt;Button1&lt;/button&gt;
  &lt;button id="button2"&gt;Button2&lt;/button&gt;
  &lt;button id="button3"&gt;Button3&lt;/button&gt;
</code></pre>

<p>So here's my simple event function:</p>

<pre><code>$('button').live("click", function (){
    $(this).addClass("this-button").siblings().removeClass("this-button");
});
</code></pre>

<p>This does not work as expected. </p>

<p>Here's to try: check the classes in firebug.
<a href="http://jsbin.com/orifo/edit" rel="nofollow">http://jsbin.com/orifo/edit</a></p>

<p>I'm really very confused. I think it's clear that $(this) refers to all the buttons, rather than just the one latest clicked. Why is this? Shouldn't it be the one latest clicked?</p>

<p>Can someone explain why this doesn't work.</p>

<p>Thanks.</p>
