select a class inside a div jquery
<p>I have a div with some span elements inside that when I click one it turns on and all the others turn off.  It works the first time ie turn on but I can't turn off, it also selects all the spans with the same id.  I am pretty new to Jquery and struggling!!  any pointers much appreciated </p>

<p>thanks Techboy</p>

<pre><code>&lt;div id="btn-grp"&gt;
        &lt;span class="button ButtonOn"&gt;button1&lt;/span&gt; 
        &lt;span class="button ButtonOff"&gt;button2&lt;/span&gt;
        &lt;span class="button ButtonOff"&gt;button3&lt;/span&gt;
        &lt;span class="button ButtonOff"&gt;button4&lt;/span&gt;
        &lt;span class="button ButtonOff"&gt;button5&lt;/span&gt;
&lt;/div&gt;


&lt;script type="text/javascript"&gt;

    $("#btn-grp").click(function(){
        $(this).addClass('ButtonOn').siblings().removeClass('ButtonOff');
    }); 

&lt;/script&gt;
</code></pre>
