How to choose $this element in each container(jQuery)? - php

Question

I have few containers with radio buttons. That containers have unique classes(var-wrapper-1,var-wrapper-2). I'm choosing by one radio element in different containers, but I can add 'selected' class only for one element in one container at one time. I need to choose by one radio element in each container and to add class for all selected elements in all containers. One size in size, one material from materials, and add for selected variant attr-selected css class Inside one container only one variant, but in each container has to be one selected variant. Is it possible to make it dynamic or only manually, using containers unique classes?
That's a code, which I use for only one variant in one container
jQuery('.attr-container label').click(function() {
jQuery('.attr-container label').removeClass('attr-selected');
jQuery(this).addClass('attr-selected');
});
<div class="var-wrapper-1">
<div class="label var-label">
<label for="pa_size">Size</label>
</div>
<div class="value var-value">
<div class="variation-radios">
<div class="attr-container">
<div class="radio-span" >
<input type="radio" id="attribute_pa_size-l" name="attribute_pa_size" value="s">
<label for="attribute_pa_size-l">L</label>
</div>
</div>
<div class="attr-container">
<div class="radio-span">
<input type="radio" id="attribute_pa_size-m" name="attribute_pa_size" value="m">
<label for="attribute_pa_size-m">M</label>
</div>
</div>
</div>
</div>
</div>
<div class="var-wrapper-2">
<div class="label var-label">
<label for="pa_material">Material</label>
</div>
<div class="value var-value">
<div class="variation-radios">
<div class="attr-container">
<div class="radio-span" >
<input type="radio" id="attribute_pa_material-cotton" name="attribute_pa_material" value="cotton">
<label for="attribute_pa_material-cotton">Cotton</label>
</div>
</div>
<div class="attr-container">
<div class="radio-span" >
<input type="radio" id="attribute_pa_material-lace" name="attribute_pa_lace" value="lace">
<label for="attribute_pa_material-lace">Lace</label>
</div>
</div>
</div>
</div>
</div>
.attr-selected{
font-weight: 600;
border-bottom: 1px solid grey;
}

Answer 1

The code is still more complex than it needs to be, please reduce its size to a minimal example as #mplungjan suggested in their comment.
If what you're asking matches my guess, you need the css :checked pseudo class. Here is an article on this topic:
https://www.w3docs.com/snippets/css/how-to-style-the-selected-label-of-a-radio-button.html
input[type="radio"]:checked {
// something
}
input[type="radio"] {
// something else
}
No Javascript is needed here