Need my function to run after document ready

I have a problem getting my function running through ajax. I need it to use my function when the page has finished loading. This is not a get function ore Post, it’s pure code. There should be a select opportunity.

I’ve really searched a lot on google but just can’t find the solution.

I would then like to be able to use my php function and display it on the page after the page has finished loading

add_action('wp_ajax_add_woocommerce_file', 'add_woocommerce_file');
add_action('wp_ajax_nopriv_add_woocommerce_file', 'add_woocommerce_file');
function add_woocommerce_file() { ?>

 <form class="cart variation" action="" method="post" enctype='multipart/form-data'>
     <div class="popup">
             <div class="popup-content">
                 <div class="close-content-container">X</div>
             <?php the_content(); ?>
                 </div>
            </div>
     <?php
    global $product, $post;

    $output = '
    <select name="variation_id" id="variation_id">
    <option value="">V?lg...</option>';

    foreach( $product->get_available_variations() as $variation ){
        if($variation['max_qty'] > 0) {//Finder ud af om der er vare p? lager det den kalde variation.
        $option_value = array(); 

        foreach( $variation['attributes'] as $attribute => $term_slug ){
            $taxonomy = str_replace( 'attribute_', '', $attribute );
            $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
            $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name; // Attribute value term name

            $option_value[] =  ' ' .$term_name. ' ';

        }

        $option_value = implode( '   ::   ', $option_value );

        $output .= '
        <option class="option_value" value="'.$variation['variation_id'].'">'.$option_value.'</option>';

        }
    }
    $output .= '
        </select>';
?><a type="button" id="open" class="open-popup">Kort varebeskrivelse</a><?php
   echo $output;

 ?>
     <input type="hidden" name="variation_id" id="variation_id" value="" />
     <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
     <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />

     <div class="tilfoej"><div class="cart_flex">L?g i kurv</div></div>

</form> <?php 
}

add_filter('woocommerce_after_shop_loop_item', 'add_woocommerce_file', 60);

    // My ajax call

jQuery(document).ready( function () {

    // Ajax 
    jQuery.ajax({
            url: the_ajax_script.ajaxurl,
            type: "POST",
            dataType: 'html',
            data: {
                    action: 'add_woocommerce_file'
                            },
            success: function( response ) {
                jQuery(".variation").show();
                            },
            error : function() {
                alert("virker ikke");
            }
    });
});

// output on category
    <div class="variation"></div>