How do I add/remove class onclick for span elements

Question

I am creating a simple quiz site. I have a page with lots of different question options that the user can choose.

They click a question and the answers list slides down into view. When they click their chosen answer which is a <span> element I want that span to have a class "correct". If they decide to choose another answer when they click on it I want the class removed from their first choice and added to the current choice, so only one span element will have a class "correct" at any one time.

I have had problems with adding/removing classes onclick. I have shown snippets of my code below. I got a few answers from W3C and SO (which work on the Fiddles) but the code does not work on my site when I test it...I am using Notepad++ to create and test this site. Below is an example of my code....any help would be most appreciated.

 $("carQuestion span").click(function() { $('span.correct').not(this).removeClass('correct'); $(this).addClass('correct'); }); 

 .correct { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="carQuestion"> What Car is most like me? <span class="correct">Ferrari</span> <span>Limousine</span> <span>SUV</span> <span>Stationwagon</span> </p> 

Answer 1

Behold this completely jQuery-less answer: ;)

 label {display:block;cursor:pointer;} label span {display:inline-block;padding:0.1em 0.5em;} input[type=radio]:checked + span {background-color:#efe;} input[type=radio] {display:none;} 

 <p> What Car is most like me? <label><input type="radio" name="carQuestion" checked="checked" /><span>Ferrari</span></label> <label><input type="radio" name="carQuestion" /><span>Limousine</span></label> <label><input type="radio" name="carQuestion" /><span>SUV</span></label> <label><input type="radio" name="carQuestion" /><span>Stationwagon</span></label> </p> 

Answer 2

You're missing the # .

$("#carQuestion span").click(function() {
  $('span.correct').not(this).removeClass('correct');
  $(this).addClass('correct');
});

Answer 3

I do a jsFiddle for you, see here https://jsfiddle.net/xox7kvko/1/

Don't forget use # when you want select a ID

$("#carQuestion span").click(function(){
    $("#carQuestion span").removeClass('correct');
        $(this).addClass('correct');
    });

Answer 4

Thanks for everyone's help. I tried some of the options above but for some reason they just did not work on my layout. Then eureka! I found a way that worked for me on my own. If anyone else is having the same problem on Notepaad++ please see my function below which works perfectly.

<script>
    $(document).ready(function(){
        $("p span").click(function(){
            $("p, span").removeClass("correct");
            $(this).addClass("correct");
        });
    }); 
</script>

Again thanks for everyone's help.