jQuery not grabbing form setup in chart.js loadCallback function

I have a form appearing in a popup, this loads in the content section of chart.js new Popup function. I'm utilizing the loadCallback as described in their documentation to set up actions based on input in the content.

When the button is clicked, the event is registering and hitting my code, however when I go to serialize the form to acquire its data, it reports blank. If I console.log the variable I've saved the form too, I do get the elements of the form.

So it appears to grab the elements, but my serializeObject function isn't getting any data or references. I was curious if this is an issue with how I'm utilizing jQuery, or perhaps an issue with something else all together.

Edit: upon further playing around with this, I found that its jQuery's serializeArray() function which isn't returning any data on the form which my serializeObject() requires. Not sure why, I use it this way in every other script with forms.

const handleUserForm = function(document) {
    console.log(document);

    myPopup = new Popup({
        id: "popup",
        title: "Download Form",
        content: '<div class="row">' +
            '<form id="user-registration-form">' +
            '<div class="row">' +
            '<div class="col"><label for="fname" hidden>First Name</label><input type="text" placeholder="First Name" id="fname"></div>' +
            '<div class="col"><label for="lname" hidden>Last Name</label><input type="text" placeholder="Last Name" id="lname"></div> ' +
            '</div>' +
            '<div class="row">' +
            '<div class="col"><label for="email" hidden>Email</label><input type="email" placeholder="email@email.com"></div>' +
            '<div class="col"><label for="organization" hidden>Organization</label><input type="text" placeholder="Organization Name"></div>' +
            '</div>' +
            '<div class="row">' +
            '<div class="col"><label for="state" hidden>State</label><select id="state"></select></div>' +
            '<div class="col"><label for="zip" hidden>Zip Code</label><input id="zip" type="text"></div> ' +
            '</div>' +
            '<div class="row">' +
            '<a class="btn btn-secondary" type="submit" id="registrationFormSubmit" style="color: white;">Submit</a>' +
            '</div>' +
            '</form> ' +
            '</div>',
        loadCallback: () => {
            $('#registrationFormSubmit').on('click', function (e) {
                e.preventDefault();

                let $reg = $('#user-registration-form');

                console.log($reg);
                console.log($reg.serializeObject());
            })
        },
    });

    myPopup.show();
}

jQuery.fn.serializeObject = function () {
    let arrayData, objectData;
    arrayData = this.serializeArray();
    objectData = {};

    console.log('serializeObject');
    console.log(arrayData);

    $.each(arrayData, function () {
        let value;

        console.log(value);

        if (this.value != null) {
            value = this.value;
        } else {
            value = '';
        }

        if (objectData[this.name] != null) {
            if (!objectData[this.name].push) {
                objectData[this.name] = [objectData[this.name]];
            }

            objectData[this.name].push(value);
        } else {
            objectData[this.name] = value;
        }
    });

    return objectData;
};

The thing is that .serializeArray() works with name : value, and you don't specify name in your input.
I made a minimal example that reproduces the behavior of your popup (sorry, I didn't fix the rest...):

const handleUserForm = function() {

   $('.popup').html(
        '<div class="row">' +
        '<form id="user-registration-form">' +
        '<div class="row">' +
        '<div class="col"><label for="fname" hidden>First Name</label><input type="text" placeholder="First Name" id="fname" name="fname" value="Joe"></div>' +
        '<div class="col"><label for="lname" hidden>Last Name</label><input type="text" placeholder="Last Name" id="lname" name="lname" value="Doe"></div> ' +
        '</div>' +
        '<div class="row">' +
        '<div class="col"><label for="email" hidden>Email</label><input type="email" placeholder="email@email.com" name="email"></div>' +
        '<div class="col"><label for="organization" hidden>Organization</label><input type="text" placeholder="Organization Name" name="organization"></div>' +
        '</div>' +
        '<div class="row">' +
        '<div class="col"><label for="state" hidden>State</label><select id="state" name="state"><option value="--"></option></select></div>' +
        '<div class="col"><label for="zip" hidden>Zip Code</label><input id="zip" type="text" name="zip"></div> ' +
        '</div>' +
        '<div class="row">' +
        '<a class="btn btn-secondary" type="submit" id="registrationFormSubmit">Submit</a>' +
        '</div>' +
        '</form> ' +
        '</div>'
    );
    
    $('#registrationFormSubmit').on('click', function (e) {
         e.preventDefault();
         let $reg = $('#user-registration-form');
         console.log($reg.serializeObject());
    })
}

handleUserForm();

jQuery.fn.serializeObject = function () {
    let arrayData, objectData;
    arrayData = this.serializeArray();
    objectData = {};

    $.each(arrayData, function () {
        let value;

        if (this.value != null) {
            value = this.value;
        } else {
            value = '';
        }

        if (objectData[this.name] != null) {
            if (!objectData[this.name].push) {
                objectData[this.name] = [objectData[this.name]];
            }

            objectData[this.name].push(value);
        } else {
            objectData[this.name] = value;
        }
    });

    return objectData;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="popup"></div>