Hiding fields based on the value of another field on SharePoint

I am using the following script and it seems it does not do anything. Does anyone any idea about what is going on? Keep in mind I am only doing the testing on 2 fields to see if the code works or not. The drop-down field that contains the department is called ROLE which can only be PMO, BC, and FINANCE. Based on each of these option selected, only the field that below to that option is supposed to be shown.

-------------------------------------------------------------------------------------------

<script type="text/javascript"  src="/SiteAssets/jquery-3.3.1.js"></script>

<script type="text/javascript" src="/SiteAssets/sputility.js"></script>

<script>
 $(document).ready(function () 
{ // Get a the choice field 
var choiceField = SPUtility.GetSPField('Role');

// Hide the target fields in <g class="gr_ gr_98 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar only-ins replaceWithoutSep" data-gr-id="98" id="98">form</g> load

SPUtility.HideSPField('Selection1-PMO');
SPUtility.HideSPField('Selection2-BC');
SPUtility.HideSPField('Selection3-FINANCE');

// create a function to show or hide a field based on the selected choice Field value 

var ShowHideField = function() { 
var selectedFieldValue = choiceField.GetValue(); 

if (selectedFieldValue != 'PMO') {
SPUtility.ShowSPField(' Selection1-PMO''); } 

else if (selectedFieldValue != 'BC') {
SPUtility.ShowSPField('Selection2-BC'); }

}; 


$(choiceField.Dropdown).on ('change', ShowHideField); });
</script>