How to select a child of a sibling element

Question

What I'm trying now, is to have a Submit button that will set the choice and record the score and I guess I'm struggling with how to traverse the DOM. I think I'm trying to select the child of a sibling. And I'm not sure why my current code isn't working for that purpose.

<div class='section' id='s1'>
    <div class='center' id='center1'>
        <div class='question' id='q1'>
        </div>
        <div class='choices' id='choices1'>
            <p class='a'>Choice A</p>
            <p class='b'>Choice B</p>
            <p class='c'>Choice C</p>
            <p class='d'>Choice D</p>
        </div>

        <input type='submit' value='Submit' class='submit'>
        <p class='score'></p>
    </div>
</div>

var score = 0;
$('.choices p').on('click', function() {
    $(this).closest('.choices').find('p').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var choice = $(this).prev('.choices').children().find('selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

Answer 1

Why not

$('.choices p').on('click', function() {
        $('.choices p.selected').removeClass('selected');
        $(this).addClass('selected');
});

$('.submit').click(function() {
        var choice = $('.choices p.selected');
        if (choice.hasClass('a')) {
            score += 1;
        }
        else if (choice.hasClass('b')) {
            score += 2;
        }

        $('.choices p').off('click');
        $('.score').text('Score is ' + score);
 });

Answer 2

You have some syntax errors. Give this a try maybe?

http://jsfiddle.net/tallrye/bqpg1a8L/

$('.choices p').on('click', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var score = 0;
    var choice = $('.selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

Answer 3

Hi I'd go with tallrye answer, but to avoid removing all the selected class in your page you might want to use

.siblings().removeClass("selected")

so it will only remove the class selected inside your div.choices

<div class='choices' id='choices1'>
        <p class='a'>Choice A</p>
        <p class='b'>Choice B</p>
        <p class='c'>Choice C</p>
        <p class='d'>Choice D</p>
</div>

Here:

 $('.choices p').on('click', function() {      
   $(this).addClass('selected').siblings().removeClass("selected");
});