How do I change the text on a checked radio button element while resetting the text of the other two?

I'm getting stuck on this, I have this radio button with 3 elements

<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1"  required />29 x 1</p>
<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2</p>
<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

now, I wanna make it so that when I check the first one, its text changes, and when I select the second one, the first text goes back to the original and the second text changes. I tried with this

function labelChanger3(){
    if (jQuery('#radio11').prop("checked", true)){
        jQuery('#radio11l').html('<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1" required />29 x 1 is ON</p>');
        jQuery('#radio12l').html('<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2 is OFF</p>');
        jQuery('#radio13l').html('<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3"/>25 x 3 is OFF</p>');

    }
}

jQuery("#radio11").change(function (){
    labelChanger3();
});

And it works for the first step. So I created corresponding functions for the other 2 elements, radio12 and radio13, with their respective .change functions. But it doesn't work. If I select for example radio12, the text changes accordingly, but when I go to select radio11 or radio13 the text stays the same. I don't understand what I should do in this case. Should I just use normal buttons at this point, that de-select each other manually when one is selected?

from Recent Questions - Stack Overflow https://ift.tt/3sQoZJ1
https://ift.tt/eA8V8J