Get mysql data for Quick Edit panel

I am trying to output the entries of a mysql table (my own) into the Quick Edit in the Woocommerce product page. I don't mind either way we could do this, either get the table data in the JS or just get the post_id and pass that to the add_to_page_fields function whereby I can use php to get what I need. I have managed to find some code that gets the data from post_meta and changed for my own use, however, JS is needed to populate the Quick Edit section. I don't know JS and so struggling.

Here is the PHP which is in my Functions.php:

//Create column
add_filter('manage_edit-product_columns', 'add_to_page_column');
function add_to_page_column( $column_array ) {

    $column_array['customerName'] = 'Customer Name';
    return $column_array;
}

//Add data to the columns
add_action('manage_posts_custom_column', 'add_to_page_data', 10, 2);
function add_to_page_data( $column_name, $id ) {

    //I might add more data in future hence switch
    switch( $column_name ) :
        case 'customerName': {
            echo get_post_meta( $id, 'customerName', true );
            break;
        }
    endswitch;

}

//Add HTML to Quick Edit. Pair up fields with one in manage_posts_custom_column
add_action('quick_edit_custom_box',  'add_to_page_fields', 10, 2);
function add_to_page_fields( $column_name, $post_type ) {

    switch( $column_name ) :
        case 'customerName': {

            // for the FIRST column only, it opens fieldset element, all our fields will be there
            echo 'fieldset class=inline-edit-col-right
                div class=inline-edit-col
                    div class=inline-edit-group wp-clearfix';

            //Add mysql table data here
            echo 'label class=alignleft
                    span class=titleCustomer Name/span
                    span class=input-text-wrapinput type=text name=customerName value=/span
                /label';
            break;

        }
    endswitch;

}

//Run the JS which is need to display the value within the fields of Quick Edit
add_action( 'admin_enqueue_scripts', 'add_to_page_get' );
function add_to_page_get( $pagehook ) {

    if ( 'edit.php' != $pagehook ) {
        return;
    }
    wp_enqueue_script( 'quickeditget', '/js/quick-edit.js', array( 'jquery' ) );

}

Here is the JS I found (which won't do what I need but I think is close):

//File: quick-edit.js
jQuery(function($){

    // it is a copy of the inline edit function
    var wp_inline_edit_function = inlineEditPost.edit;

    // we overwrite the it with our own
    inlineEditPost.edit = function( post_id ) {

        // let's merge arguments of the original function
        wp_inline_edit_function.apply( this, arguments );

        // get the post ID from the argument
        var id = 0;
        if ( typeof( post_id ) == 'object' ) { // if it is object, get the ID number
            id = parseInt( this.getId( post_id ) );
        }

        //if post id exists
        if ( id  0 ) {

            // add rows to variables
            var specific_post_edit_row = $( '#edit-' + id ),
                specific_post_row = $( '#post-' + id ),
                customer_name = $( '.column-customerName', specific_post_row ).text().substring(1); //  remove $ sign

            // populate the inputs with column data
            $( ':input[name=customerName]', specific_post_edit_row ).val( customer_name );
        }
    }
    
});