JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$yearstages = $('input[name="keystage1yr2"],input[name="keystage1yr1"]');
$savestages = $('input[name="keystage1save"]');
$('.style5').on('change', 'input', function() {
if (this.name == "keystage1save") {
$yearstages.filter('input:checked').prop('checked', false);
} else {
$savestages.filter('input:checked').prop('checked', false);
}
});
$yearstagess2 = $('input[name="keystage2yr3"],input[name="keystage2yr4"],input[name="keystage2yr5"],input[name="keystage2yr6"]');
$savestagess2 = $('input[name="keystage2save10"]');
$('.style51').on('change', 'input', function() {
if (this.name == "keystage2save10") {
$yearstagess2.filter('input:checked').prop('checked', false);
} else {
$savestagess2.filter('input:checked').prop('checked', false);
}
});
$yearstages3 = $('input[name="spmathyr1"],input[name="spmathyr2"],input[name="spmathyr2"],input[name="spmathyr3"],input[name="spmathyr4"],input[name="spmathyr5"],input[name="spmathyr6"]');
$savestages3 = $('input[name="spmathsave2"]');
$('.style52').on('change', 'input', function() {
if (this.name == "spmathsave2") {
$yearstages3.filter('input:checked').prop('checked', false);
} else {
$savestages3.filter('input:checked').prop('checked', false);
}
});
$yearstages4 = $('input[name="spmathyr1"],input[name="spmathyr2"],input[name="spmathyr2"],input[name="spmathyr3"],input[name="spmathyr4"],input[name="spmathyr5"],input[name="spmathyr6"]');
$savestages4 = $('input[name="spmathsave4"]');
$('.style52').on('change', 'input',...