JS Form - showing field supposed to hide

[lyounkins]

This mostly works. It shows the SSN when the first Val radio button is picked. It also shows the PaperAppliction when the second Val radio button is picked. The ONLY problem is that the field PaperApplication shows when the form is loaded before any radio buttons are picked. I need it to hide both SSN and PaperApplicaition until one of the radio buttons is picked, and then show the proper field. What am I missing?

Here is the JS

        $(".field.SocialSecurity input[type=radio]").on("change", function() {
          if (
            $(this).val() ==
            "As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
          ) {
            $(".field.SSN").show();
            $(".field.SSN input").focus();
            $(".field.PaperApplication").hide();
          } else if (
            $(this).val() ==
            "Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
          ) {
            $(".field.PaperApplication").show();
            $(".field.PaperApplication input").focus();
            $("field.SSN").hide();
          } else {
            $("field.PaperApplication").hide();
          }
        });

Here is the form html

     <div class="field SocialSecurity">label:SocialSecurity</div> <div class="field SSN">$$label:SSN$$
    $$input:SSN$$ $$validation:SSN$$</div> <div class="field PaperApplication">$$label:PaperApplication$$
    $$input:PaperApplication$$$$validation:PaperApplication$$</div>

[AndrisP]

You can add to CSS

.PaperApplication {
    visibility: hidden;
}

for set element with class PaperApplication hidden by default. After click radio button function change it to visible.