I'm currently able to add a button trying different solutions from online everywhere where an admin can add an upload button(upload from media library) from shipping tracking plugin. The button where I'm trying to add is in a popup_body. But it is not working when trying to click on the upload button. Does add a code to popup_body require a different type of function? Launching media uploader in WordPress from another popup

According to this, I've added a custom code from here How to add the media uploader in wordpress plugin [duplicate] in a part of existing shipping plugin file PHP. However, when I'm inserting the first 5 row in the plugin it shows. Any ways to add this code accordingly for wp_enqueue_script & wp_enqueue_media?

// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
    <div>
    <label for="image_url">Image</label>
    <input type="text" name="image_url" id="image_url" class="regular-text">
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
   
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#upload-btn').click(function(e) {
        e.preventDefault();
        var image = wp.media({ 
            title: 'Upload Image',
            // mutiple: true if you want to upload multiple files at once
            multiple: false
        }).open()
        .on('select', function(e){
            // This will return the selected image from the Media Uploader, the result is an object
            var uploaded_image = image.state().get('selection').first();
            // We convert uploaded_image to a JSON object to make accessing it easier
            // Output to the console uploaded_image
            console.log(uploaded_image);
            var image_url = uploaded_image.toJSON().url;
            // Let's assign the url value to the input field
            $('#image_url').val(image_url);
        });
    });
});
</script>