I am facing a challenge with a form that includes multiple series of input fields created dynamically by a plugin. The structure of the code is as follows:
<!-- section 1 -->
<div>
<ul>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][people]" id="wccf_product_people_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
</ul>
</div>
<!-- section 2 -->
<div>
<ul>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budget_one" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budgete_twp" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
<li>
<input type="radio" name="wccf[product][budget]" id="wccf_product_budget_three" class="wccf wccf_product wccf_radio wccf_product_radio"></input>
</li>
</ul>
</div>
My goal is to apply the .checked class to the <li> elements that contain a checked radio button.
I have made some progress in achieving this functionality, but I am encountering an issue where selecting an element in one section causes the previously selected element in the other section to be unchecked and vice versa.
// Radio buttons for PEOPLE
$('input[name="wccf[product][people]"]').on('click', function() {
$(".checked").removeClass("checked");
$(this).parent().toggleClass("checked");
});
// Radio buttons for BUDGET
$('input[name="wccf[product][budget]"]').on('click', function() {
$(".checked").removeClass("checked");
$(this).parent().toggleClass("checked");
});