Javascript to hide elements

We're looking to move our existing processes & forms over from a legacy system and want to retain the user experience as closely as possible.  We're currently trialing with an onPrem free professional version with a view to purchasing pro licenses once the trial/PoC is complete.

We have a number of forms with dynamic elements/controls that show/hide based on the values of other elements.   Whilst I can see a way to achieve this with sections and the visibility controls, this seems clunky and affects the overall layout so I'd like to be able to apply show/hide and disable/enable validation with javascript.

The Javascript API has the FormUtil.getField() function, which can then be hidden with .hide() but this doesn't appear to clear any validation rules or hide the associated label.

I've also tried using direct JQuery as per below but this doesn't work for certain types of elements:

$('#NewCustomer').change(newCustomer);
newCustomer();
function newCustomer() {
      //console.log($(this).prop('checked'));
      if ($(this).prop('checked')) {
          $("#newCustomerName").show();
        $('label[for="newCustomerName"]').show();
        $("#customerID").hide();
        $('label[for="customerID"]').hide();
    } else {
          $("#newCustomerName").hide();
        $('label[for="newCustomerName"]').hide();
        $("#customerID").show();
        $('label[for="customerID"]').show();
    }
}

In the above, NewCustomer is a checkbox, newCustomerName is a text field and customerID is a multiselect.  I'm simply trying to show the newCustomerName text field and hide the customerID select if NewCustomer is checked and the reverse for when its not.  This works for the textfield but not the multiselect.

I've seen a few other community posts around this but most seem to point to using sections, however I'd like to avoid changing the layout of the form.  Perhaps there is a plugin to enable visibility controls directly to elements, or to enable nested sections?

Thanks in advance!

Scott