.focus() jQuery & vanilla js not working on element in firefox

Question

I have a element that I've made focusable through tabindex="0" attribute. These labels contain inputs and are custom checkboxes. The typical functionality between checkboxes and radios in a group is to use the up and down arrow keys to switch between them and space to select.

I am trying to recreate this behavior, which doesn't work because of the nesting within in divs.

I have recreated the behavior with jQuery's .next() and .prev() to go focus on the next or previous label and focus on it. This works fine in chrome.

It does not work in firefox.

When I log the element that I am selecting (console.log($(event.target).prev()[0]) exists and it exists and is the right element. When I try to use .focus() on it or wrap it in a jQuery selector and then try jQuery's .focus() on it, nothing happens. Only in firefox.

I read somewhere to put it in a setTime delaying after the keyup event, but that doesn't work either.

Does anyone have any ideas?

Here is a sample of my html:

<div class="formify-field-container " id="formify-field-container-537" data-ffid="537" data-field-type="radio" data-rule-count="0" aria-live="assertive" role="alert" data-unmet-rule-count="0" data-rule-action="" data-rule-requirement="" ng-class="(isInValidInput('fiscalAgentCOrSA') ? 'formify-error' : '')">

                <div class="formify-field-input formify-radio ">
                    <fieldset class="formify-fieldset">
                        <div class="formify-legend">Is the district operating as the fiscal agent of a consortium or
                            shared
                            service agreement: <span style="color:#ff0000">*</span>
                        </div>

                        <label data-formify-ffid="537" class="formify-radio-label" for="formify-field-537-0" tabindex="0">
                            <input class="formify-field formify-radio ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" ng-model="formData.fiscalAgentCOrSA" name="fiscalAgentCOrSA" value="1" id="formify-field-537-0" required="" type="radio">
                            <span><i data-formify-ffid="537" class="fa "></i></span>
                            Yes </label>
                        <label data-formify-ffid="537" class="formify-radio-label" for="formify-field-537-1" tabindex="0">
                            <input class="formify-field formify-radio ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" ng-model="formData.fiscalAgentCOrSA" name="fiscalAgentCOrSA" value="0" id="formify-field-537-1" required="" type="radio">
                            <span><i data-formify-ffid="537" class="fa "></i></span>
                            No </label>
                    </fieldset>
                </div>
            </div>

Here is the jQuery:

 $('.formify-radio').on('keyup', function(e){
    var event=e||window.event;
    if(event.which===13 || event.which===32){
        $(event.target).find('input').trigger('click');
    }
    if(event.which===38){
        if($(event.target).prev().is('label')) $($(event.target).prev()[0]).focus();
    }
    if(event.which===40){
        if($(event.target).next().is('label')) $($(event.target).next()[0]).focus();
    }
});

Update: Here is a jsfiddle: https://jsfiddle.net/afxkutvm/