Form field labels do not hide when inputs/selects are hidden

I have created a Bootstrap form and I am using the class form-floating on the controls.

When I hide some of the controls, the labels remain and are scrunched together. This happens to some controls but not to others. The code looks exactly the same so I am a bit miffed as to what is happening.

One thing I did notice is that when I move the hidden fields above the field that triggers the hide, the labels are hidden properly. However, if I move them back under the field that triggers hiding, the labels again remain and are overlapped.

HTML:

<div class="form-floating mb-4">
    <select class="form-select" id="frmProjectInterconnect" required>
        <option value="" selected disabled></option>
        <option>Yes</option>
        <option>No</option>
    </select>
    <label for="frmProjectInterconnect">Project Interconnection Point</label>
</div>

<div class="form-floating mb-4">
    <input type="number" class="form-control" id="frmInterconnectionCapacity" required>
    <label for="frmInterconnectionCapacity">Interconnection Capacity (Mbps)</label>
</div>

<div class="form-floating mb-4">
    <select class="form-select" id="frmDedicatedOrShared" required>
        <option value="" selected disabled> </option>
        <option>Dedicated</option>
        <option>Shared</option>
    </select>
    <label for="frmDedicatedOrShared">Dedicated or Shared?</label>
</div>

<div class="form-floating mb-4">
    <input type="text" class="form-control" id="frmServiceProvider" required>
    <label for="frmServiceProvider">Service Provider</label>
</div>

Javascript:

$('#frmProjectInterconnect').change(function(){
    if($(this).val() == "Yes") {
        $("#frmInterconnectionCapacity").show();
        $("#frmInterconnectionCapacity").attr('required', '');
        $("#frmInterconnectionCapacity").attr('data-error', 'This field is required.');
        $("#frmDedicatedOrShared").show();
        $("#frmDedicatedOrShared").attr('required', '');
        $("#frmDedicatedOrShared").attr('data-error', 'This field is required.');
        $("#frmServiceProvider").show();
        $("#frmServiceProvider").attr('required', '');
        $("#frmServiceProvider").attr('data-error', 'This field is required.');
    } else {
        $("#frmInterconnectionCapacity").hide();
        $("#frmInterconnectionCapacity").removeAttr('required');
        $("#frmInterconnectionCapacity").removeAttr('data-error');
        $("#frmDedicatedOrShared").hide();
        $("#frmDedicatedOrShared").removeAttr('required');
        $("#frmDedicatedOrShared").removeAttr('data-error');
        $("#frmServiceProvider").hide();
        $("#frmServiceProvider").removeAttr('required');
        $("#frmServiceProvider").removeAttr('data-error');
    }
});