Selector not working

Selector not working

I have this code that works great on my test webpage, but in my development area it doesn't work properly, the span with a class of buttonOn works.

I have 5 span tags and the one I have clicked should have the text in green(ButtonOn) and the others red(buttonOff).

      <div id="control">
                
                <span class="buttonSmall-grad buttonOff">Std Night</span>
                <span class="buttonSmall-grad AllOn buttonOff">All On/off</span>
                <span class="buttonSmall-grad Cooking buttonOff">Cooking</span>
                <span class="buttonSmall-grad buttonOff">Bedtime</span>
                <span class="buttonSmall-grad buttonOff">Party</span>
                <span class="buttonSmall-grad ButtonOn">Guest</span>
      </div>



            $("#control span.buttonSmall-grad").click(function(){
       
                                    $(this).addClass('ButtonOn').siblings().removeClass('ButtonOn');




Thanks for an help thought I had this one with it working in the test area!!!!