Radio button is showing div on selection but not hiding after selecting a different radio button

I have three divs I want to show based on a radio selection. I've written the below script, but the problem I've run into is the div doesn't hide after a different radio button is selected. I'm using ucalc so I can't change the class names or ids of the divs or the radio buttons so have to work with that.

Note, the radio button is automatically selected when the form loads so the first div needs to be showing initially.

Code below:

// First Div/Radio Button
$(document).ready(function(){
 $('#input_radio-30-0-des').on('change', function(){ 
 var a = $(this).prop('checked');
 if(a) {
 $("#grid-40-42").show();
 } else {
 $("#grid-40-42").hide();
 }
 })
});

// Second Div/Radio Button
$(document).ready(function(){
 $("#grid-44-46").hide();
 $('#input_radio-30-1-des').on('change', function(){ 
 var a = $(this).prop('checked');
 if(a) {
 $("#grid-44-46").show();
 } else {
 $("#grid-44-46").hide();
 }
 })
});

// Third Div/Radio Button
$(document).ready(function(){
 $("#grid-44-46").hide();
 $('#input_radio-30-2-des').on('change', function(){ 
 var a = $(this).prop('checked');
 if(a) {
 $("#grid-44-46").show();
 } else {
 $("#grid-44-46").hide();
 }
 })
});

I'm not very familiar with writing javascript (you can probably tell!) so an explanation for 'dummies' would be appreciated!