I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.

If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <li>, only one <p class="subitem-text"> should have class_A added to it.

Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?

<ul>
<li>
    <div class="myitem-wrapper" id="10"> 
        <div class="myitem clearfix">
            <span class="number">1</span>
            <div class="item-text">Some text here </div>
        </div>
        <p class="subitem-text">
            <input type="radio" name="10" value="15" id="99">
            <label for="99">First subitem </label>
        </p>
        <p class="subitem-text">
            <input type="radio" name="10" value="77" id="21">
            <label for="21">Second subitem</label>
        </p>

    </div>
</li>

<li>
    <div class="myitem-wrapper" id="11"> 
        <div class="myitem clearfix">
            <span class="number">2</span>
            <div class="item-text">Some other text here ... </div>
        </div>
        <p class="subitem-text">
            <input type="radio" name="11" value="32" id="201">
            <label for="201">First subitem ... </label>
        </p>
        <p class="subitem-text">
            <input type="radio" name="11" value="68" id="205">
            <label for="205">Second subitem ...</label>
        </p>

        <p class="subitem-text">
            <input type="radio" name="11" value="160" id="206">
            <label for="206">Third subitem ...</label>
        </p>
    </div>
</li>