I have a Microsoft Power Apps Portals page on my portal that requires a bit of customization through JavaScript. I would like to hide fields based on an email address entered, which works fine. However, when the user enters the email domain that will show some fields, I would like to apply additional formatting.

Here is the code I currently have:

$(document).ready(function () {
     $("#emailaddress1").change(onShowHideEmployeeFields);
     onShowHideEmployeeFields();
});

function onShowHideEmployeeFields() {
    var varEmail = $("#emailaddress1").val()
    //alert(varEmail)
    if (varEmail.includes("@example.org")) {
       $('#xxx_employeeid').parent().parent().show();
       $('#xxx_employeeid').prop('required', true);
       $('#xxx_employeeid').closest(".control").prev().addClass("required");
       $('#xxx_defaultfacilityid').parent().parent().show();
       $('#xxx_defaultfacilityid').prop('required', true);
       $('#xxx_defaultfacilityid').closest(".control").prev().addClass("required");
       $('#xxx_positiontitle').parent().parent().show();
       $('#xxx_officer').parent().parent().show();
       $('#xxx_officer').prop('required', true); 
       $('#xxx_officer').closest(".control").prev().addClass("required");
       $('#xxx_jopositiontitle').parent().parent().show();
    }
    else {
        $('#xxx_employeeid').parent().parent().hide();
        $('#xxx_defaultfacilityid').parent().parent().hide();
        $('xxx_defaultfacilityid_label').parent().parent().hide();
        $('xxx_positiontitle_label').parent().parent().hide();
        $('#xxx_positiontitle').parent().parent().hide();
        $('#xxx_officer').parent().parent().hide();
        $('#xxx_jopositiontitle').parent().parent().hide();
    }
}

The code works fine, however, I want to extend the code by showing the JO Position Title IF the Officer field has been marked as 'Yes' (it is a boolean yes/no radio checkbox field).

I've tried testing this component separately using the below code:

function onShowHideEmployeeFields() {
$('xxx_officer').change(function () {
    var varJO = $("$xxx_officer").val();
    //alert(varJO)
    if (varJO === 'Yes') {
    $('xxx_jopositiontitle').parent().parent().show();
    }
    else {
    $('xxx_jopositiontitle').parent().parent().hide();
    }
})
}

This code doesn't seem to do anything. Any thoughts on this issue?

Thank you!