Second featured image only shows in metabox preview after saving a post in the wordpress editor

Question

I am trying to add a second featured image to the Wordpress post editor, and it seems all be working. When I select and image from the mediauploader the first time the image shows in the preview of the metabox. However when I want change an image of the second featured image, I have to save the post first and than i seeing the change, it doesn't change immediately.

Can some help please.

This is my second-featured-image-meta-box.php

<?php
// Add meta box for second featured image
function add_second_featured_image_meta_box() {
    $post_types = array('project');  // Adjust this to your post types

    foreach ($post_types as $post_type) {
        add_meta_box(
            'second_featured_image_meta_box',
            'Second Featured Image',
            'display_second_featured_image_meta_box',
            $post_type,
            'side',
            'default'
        );
    }
}

// Display content of the second featured image meta box
function display_second_featured_image_meta_box($post) {
    $second_featured_image = get_post_meta($post->ID, '_second_featured_image', true);
    ?>

    <style>
        .image-preview img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }
        .edit-image-link,
        .remove-image-link {
            margin-top: 5px;
            display: block;
        }
    </style>

    <label for="second_featured_image">Second Featured Image:</label>
    <div class="image-preview" id="second_featured_image_preview">
        <?php if (!empty($second_featured_image)) : ?>
            <?php echo wp_get_attachment_image($second_featured_image, 'full'); ?>
        <?php endif; ?>
    </div>
    <button class="upload-image-button button" id="upload_second_featured_image_button">Upload/Select Image</button>
    <button class="remove-image-button button" id="remove_second_featured_image_button" <?php echo empty($second_featured_image) ? 'style="display: none;"' : ''; ?>>Remove Image</button>

    <input type="hidden" id="second_featured_image" name="second_featured_image" value="<?php echo esc_attr($second_featured_image); ?>" style="width: 100%;">

    <?php
}

// Save the second featured image when the post is saved
function save_second_featured_image_meta_box($post_id) {
    if (isset($_POST['second_featured_image'])) {
        $second_featured_image = absint($_POST['second_featured_image']); // Use absint to ensure it's an integer
        update_post_meta($post_id, '_second_featured_image', $second_featured_image);

        // Check if the remove image button was clicked
        if (isset($_POST['remove_second_featured_image']) && $_POST['remove_second_featured_image'] === 'true') {
            delete_post_meta($post_id, '_second_featured_image');
        }
    }
}

// Hook to add meta box
add_action('add_meta_boxes', 'add_second_featured_image_meta_box');

// Hook to save meta box data
add_action('save_post', 'save_second_featured_image_meta_box');
?>

and this is my javascript:

jQuery(document).ready(function ($) {
    let mediaUploader = wp.media({
        title: 'Choose Image',
        button: {
            text: 'Choose Image'
        },
        multiple: false
    });

    mediaUploader.on('select', function () {
        var attachment = mediaUploader.state().get('selection').first().toJSON();
        $('#second_featured_image').val(attachment.id);
        $('#second_featured_image_preview').attr('src', attachment.url).show();
        $('#upload_second_featured_image_button').text('Change Image');
        $('#remove_second_featured_image_button').show();
    });

    function removeFeaturedImage() {
        $('#second_featured_image').val('');
        $('#second_featured_image_preview').attr('src', '').hide();
        $('#upload_second_featured_image_button').text('Set Featured Image');
        $('#remove_second_featured_image_button').hide();
        return false;
    }

    // On page load, hide the "Remove Image" button if no image is selected
    if ($('#second_featured_image').val() === '') {
        $('#remove_second_featured_image_button').hide();
    }

    $('#upload_second_featured_image_button').on('click', function (e) {
        e.preventDefault();
        mediaUploader.open();
        console.log("Works");
    });

    // Add click event for the "Remove Image" button
    $('#remove_second_featured_image_button').on('click', function (e) {
        e.preventDefault();
        removeFeaturedImage();
    });
});