JSFiddle - React, Tailwind, and code Playground

HTML

<form id="subscribe">
    <input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo()"/>
    <label for="subf_new">New</label>
    <input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo()"/>
    <label for="subf_renewal">Renewal</label>
    <input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo()"/>
    <label for="subf_gift">Gift</label>
</form>

JavaScript

function foo() {
    var subTypeVal = document.forms["subscribe"]["sub_type"].value;
    alert("Boo:" + subTypeVal);
    
    if (subTypeVal == "renewal") {/*
        document.getElementById("showHideSubID").style.display = 'block';
        document.getElementById("showHideGiftShipping").style.display = 'none';
        document.getElementById("showHideShippingChoices").style.display = 'block';
        document.getElementById("presentBox").style.display = 'block';
        if (subShipVal == "different") {
            document.getElementById("showHideStandardShipping").style.display = 'block';
        } else {
            document.getElementById("showHideStandardShipping").style.display = 'none';
        }*/
        alert("Foo - Renewal Function Ran.");
    } else if (subTypeVal == "new") {/*
        document.getElementById("showHideSubID").style.display = 'none';
        document.getElementById("showHideGiftShipping").style.display = 'none';
        document.getElementById("showHideShippingChoices").style.display = 'block';
        document.getElementById("presentBox").style.display = 'block';
        if (subShipVal == "different") {
            document.getElementById("showHideStandardShipping").style.display = 'block';
        } else {
            document.getElementById("showHideStandardShipping").style.display = 'none';
        }*/
        alert("Foo - New Function Ran.");
    } else {/*
        document.getElementById("showHideSubID").style.display = 'none';
        document.getElementById("showHideGiftShipping").style.display = 'block';
        document.getElementById("showHideShippingChoices").style.display = 'none';
        document.getElementById("showHideStandardShipping").style.display = 'none';
        document.getElementById("presentBox").style.display = 'none';
        */
        alert("Foo - Else Function Ran.");
    }

}