Fields created by repeatable plugin from Rhyzz at https://www.rhyzz.com/repeatable-fields.html and works correctly to pass values to the database.

I need to get value from the virtual text input field using $("#vids_fid0_url").on("input", function() {}) before the field is submitted, to avoid multiple steps by the user which involves saving to make the field available in the HTML document, then do the steps to enter field value and save again.

Expected result

When a Youtube URL is entered into the field labeled URL, a button should display at the right of the row and the video title should be taken from the remote JSON object and entered into the field labeled Title

The code

$("#vids_fid0_url").on("input", function() {
    
    if( $(this).val().search(/youtu/i) != -1 ) {
        $("#get_ytimg_btn").show();
        url = $(this).val();
        $.get("https://www.youtube.com/oembed?url="+url+"&format=json", function(data) {
            $("#vids_fid0_title").val(data.title);
        });
    }
    
});

The method doesn't execute because there is no literal HTML field with the ID unless the document is saved.

Tried

various addEventListener() formats without success