On click of Radio button, highlight a <p> tag in jQuery

Question

I have two Radio buttons with its own labels and paragraph under it. Here's how it looks:

HTML

<input type="radio" id="less_7" name="duration" />
<label for="less_7" id="label_7">Less 7</label>
<p>Less 7</p>

<input type="radio" id="7_10" name="duration" />
<label for="7_10" id="label_10">7 to 10</label>
<p>7 to 10</p>

CSS

label {
    font-weight: normal;
}
.strong {
    font-weight: bold;
}

jQuery

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $(this).addClass('strong');
    });
});

On click of the Radio button, I would like the Paragraph tag which is closest to it to get highlighted with the class strong. On click of any other radio button, its paragraph should get highlighted and the previous one should lose its class.

Currently, I am able to highlight the respective label. I would like to set the class strong to the paragraph under it.

My Working Fiddle -> https://jsfiddle.net/ajitks/x83mpjzw/

If the next class can be used, how do I select $(this + p)?

Answer 1

You can use next:

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $('label').next('p').removeClass('strong');
        $(this).next('p').addClass('strong');
        $(this).addClass('strong');
    });
});

Updated JSFiddle