Rollover Issue

Rollover Issue


Longtime visitor - first time poster - and i'm looking for some quick
assistance.
I have this here:
                    //Sound button
                    var button =$('<div class="fleft soundBtn"><input type="img"
class="soundButtonOff" /></div>').appendTo(cp);
                    button.mouseover(
                            function() {
                            $(this).removeClass('soundButtonOff');
                                $(this).addClass('soundButtonOn');
                            });
                    button.mouseout(
                            function() {
                            $(this).removeClass('soundButtonOn');
                                $(this).addClass('soundButtonOff');
                            });
                    //Put your onclick function here
                        button.click(
                            function() {
                                //$(this).removeClass('soundButtonOff');
                                //$(this).addClass('soundButtonOn');
                            });
it's supposed to have ONE button, of a speaker - and when you hover
over it - it changes - to turn the sound off - and when you mouse off
- it goes back to it's off state.
however - i get two speakers - on top of each other, and when i hover
over them, only one changes?! What have i done wrong?