In my project, I have 3 identical sections that are exactly the same as each other. What I want to achieve is a functionality where when I click on the ".rad1" (first radio button), its label gets styled. Similarly, when I click on ".rad2", it should remove the style from the first radio button and apply it to the second radio button. Importantly, this styling change should only occur within the section being clicked, not affecting any other section.
Although I have attempted the following code snippet, I haven't been successful in achieving the desired outcome:
$('.rad1').click(function() {
$(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
$(this).parent().next('.label1').css('background', 'transparent');
$(this).parent('.label2').css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
... (repeat similar structure for the remaining sections)