Adding Custom Meta Boxes to WordPress site.

To create a meta box use the add_meta_box() function and plug its execution to the add_meta_boxes action hook.

The following example is adding a meta box to the post edit screen and the wporg_cpt edit screen.

So adding metabox might be as easy as adding this line of code to your function.php file:

function wporg_add_custom_box() {
    $screens = [ 'post', 'wporg_cpt' ];
    foreach ( $screens as $screen ) {
        add_meta_box(
            'wporg_box_id',                 // Unique ID
            'Custom Meta Box Title',      // Box title
            'wporg_custom_box_html',  // Content callback, must be of type callable
            $screen                            // Post type
        );
    }
}

add_action( 'add_meta_boxes', 'wporg_add_custom_box' );

The wporg_custom_box_html function will hold the HTML for the meta box.

The following example is adding form elements, labels, and other HTML elements. You can also use get_post_meta to get saved value and insert the value to a metabox html form. See the example below:

/**
* This function display metabox form and retrieve metabox value and insert it to metabox form.
*
* @see More on the selected() function go to https://developer.wordpress.org/reference/functions/selected/.
*/
function wporg_custom_box_html( $post ) {
    $value = get_post_meta( $post->ID, '_wporg_meta_key', true );
    ?>
    <label for="wporg_field">Description for this field</label>
    <select name="wporg_field" id="wporg_field" class="postbox">
        <option value="">Select something...</option>
        <option value="something" <?php selected( $value, 'something' ); ?>>Something</option>
        <option value="else" <?php selected( $value, 'else' ); ?>>Else</option>
    </select>
    <?php
}

Behind the Scenes
You don’t normally need to be concerned about what happens behind the scenes. This section was added for completeness.

When a post edit screen wants to display all the meta boxes that were added to it, it calls the do_meta_boxes() function. This function loops through all meta boxes and invokes the callback associated with each.
In between each call, intervening markup (such as divs, titles, etc.) is added.

Removing Meta Boxes

To remove an existing meta box from an edit screen use the remove_meta_box() function. The passed parameters must exactly match those used to add the meta box with add_meta_box().

To remove default meta boxes check the source code for the parameters used. The default add_meta_box() calls are made from wp-includes/edit-form-advanced.php.

OOP WAY

abstract class WPOrg_Meta_Box {
    /**
     * Set up and add the meta box.
     */
    public static function add() {
        $screens = [ 'post', 'wporg_cpt' ];
        foreach ( $screens as $screen ) {
            add_meta_box(
                'wporg_box_id',          // Unique ID
                'Custom Meta Box Title', // Box title
                [ self::class, 'html' ],   // Content callback, must be of type callable
                $screen                  // Post type
            );
        }
    }
 
 
    /**
     * Save the meta box selections.
     *
     * @param int $post_id  The post ID.
     */
    public static function save( int $post_id ) {
        if ( array_key_exists( 'wporg_field', $_POST ) ) {
            update_post_meta(
                $post_id,
                '_wporg_meta_key',
                $_POST['wporg_field']
            );
        }
    }
 
 
    /**
     * Display the meta box HTML to the user.
     *
     * @param \WP_Post $post   Post object.
     */
    public static function html( $post ) {
        $value = get_post_meta( $post->ID, '_wporg_meta_key', true );
        ?>
        <label for="wporg_field">Description for this field</label>
        <select name="wporg_field" id="wporg_field" class="postbox">
            <option value="">Select something...</option>
            <option value="something" <?php selected( $value, 'something' ); ?>>Something</option>
            <option value="else" <?php selected( $value, 'else' ); ?>>Else</option>
        </select>
        <?php
    }
}
 
add_action( 'add_meta_boxes', [ 'WPOrg_Meta_Box', 'add' ] );
add_action( 'save_post', [ 'WPOrg_Meta_Box', 'save' ] );

Use AJAX to update save the post on JS event instead of post update

You can use JavaScript AJAX with jQuery to save the value of metabox instead of waiting for a user tu update the post.

If you interested in such thing continue reading this the above tutorial on its src page here

https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/
https://developer.wordpress.org/reference/functions/do_meta_boxes/
https://www.wproots.com/complex-meta-boxes-in-wordpress/
https://themefoundation.com/wordpress-meta-boxes-guide/