Trying to create custom form with fusion builder for WordPress, event fire before inputs are in DOM

I'm working on a Wordpress site that has Avada / Fusion Builder plugin installed. I'm trying to define my own custom page element which lets an admin browse media assets. I need to attach some JS functionality to the data entry form that is auto-generated in the Wordpress backend/admin pages.

Following the instructions here, I have managed to get my custom element type started. When editing pages in the backend using Avada Builder, my custom element is available. When I add my element to a page, the form I see is from my custom element.

I have some admin JS enqueued which also seems to work, but somehow the event I'm triggering is not able to locate my input elements when I use document.getElementById()

// admin.js -- included when editing a page with Avada Builder
jQuery( document ).ready( function() {
    jQuery( 'body' ).on( 'mycompany-video-option-loaded', function( event, param_name ) {
        // this correctly fires every time i attempt to edit an instance of my custom element
        console.log('mycompany-video-option-loaded fired, param_name=' + param_name);


        // let's try adding simple autocomplete
        let ac_id = param_name + '_input';
        console.log('ac_id=' + ac_id); // this yields mycompany_video_id_input
        ac_el = document.getElementById(ac_id);

        // THIS IS ALWAYS NULL
        // somehow the HTML elements do not yet exist in the page
        console.log(ac_el);

        // SADLY I am unable to do anything with my inputs because I cannot locate them

    } );
} );

Note that the mycompany-video-option-loaded event above gets fired when this markup is loaded with the param values merged into it:

<div class="mycompany-video-option">
        <input
                type="hidden"
                name="{{ param.param_name }}"
                id="{{ param.param_name }}"
                class="mycompany-video-option-hidden-input"
                value="{{ option_value }}"
        />
        <input type="text" class="fusion-hide-from-atts" value="Use this to select video" id="{{ param.param_name }}_input" name="{{ param.param_name }}_input" />
        <div id="{{ param.param_name }}-results" class="mycompany-video-results">

        </div>

</div>
<#
        // this event is firing, and *should* fire after the HTML above is rendered, but i cannot locate my HTML elements
        // in the document
        jQuery( 'body' ).trigger( 'mycompany-video-option-loaded', [ param.param_name ] );
#>

On my most recent attempt to run this, the console output looked like this

mycompany-video-option-loaded fired, param_name=mycompany_video_id
ac_id=mycompany_video_id_input
null

In firefox, when I inspect my text input, it clearly has id and name attributes of mycompany_video_id_input. The HTML that fusion builder assembles in the page (this is done dynamically via JS) is this:

<div class="mycompany-video-option">
    <input type="hidden" name="mycompany_video_id" id="mycompany_video_id" class="mycompany-video-option-hidden-input" value="3192">
    <input type="text" class="fusion-hide-from-atts" value="Use this to select video" id="mycompany_video_id_input" name="mycompany_video_id_input">
    <div id="mycompany_video_id-results" class="mycompany-video-results">

    </div>

</div>

You will note that the HTML dynamically rendered here does not contain the JS from the template above. It looks like fusion builder executes that code in some other way than sticking a script in the page when it renders this form.

Am I doing something wrong? Is it impossible to refer to my HTML elements in this function I'm triggering? Is there some other fusion builder event I can listen for which fires AFTER these inputs are inserted into the DOM?