Dynamically Create Wordpress Metabox

One of the first steps I found to creating a dynamic metabox is to create the additional metabox you want duplicated on button click.

In a separate metabox, we require a field that will contain a count for the desired dynamic metaboxes. *Note this field can be hidden or visible.

global $presenter_count;

add_meta_box(  
    'Meetings', // $id  
    'Meetings Info', // $title   
    'show_custom_meetings_meta_box', // $callback  
    'meetings', // $page  
    'normal', // $context  
    'high', // $priority
     $custom_meetings_meta_fields); // $callback_args          

$c = 0;
$count = get_post_meta($post_id, 'meetings_presenter_count', true);

while ( $c < $count) {

    $presenter_count = 0;

    add_meta_box(  
        'Presentation'.$c, // $id  
        'Presentation '.++$c, // $title   
        'show_custom_meetings_meta_box', // $callback  
        'meetings', // $page  
        'normal', // $context  
        'low', // $priority
         $custom_meetings_presenter_meta_fields); // $callback_args  
}

Inside the callback function that builds the fields we want to make sure we are calling the global variable we set up $presenter_count.

Each time the while loop executes, based off the meta_value from number of presentations field, presenter count increments, and this will set the correct array for our fields.

// Callback args for metabox
$custom_meetings_presenter_meta_fields = array(  
        array(  
            'label' => 'Presenter\'s Name',
            'desc'  => 'The presenter\'s prefix and name',
            'id'    => $prefix.'name',
            'type'  => 'presenter_name'
        ));

// Callback function
    function show_custom_meetings_meta_box($post, $custom_meetings_field) {  
global $custom_meetings_meta_fields, $custom_meetings_presenter_meta_fields, $post, $presenter_count;
// Use nonce for verification 

echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />'; 
    // Begin the field table and loop 
    echo '<table class="form-table">';  
    foreach ($custom_meetings_field['args'] as $field) {  
        // get value of this field if it exists for this post  
        $meta = get_post_meta($post->ID, $field['id'], true);  
        // begin a table row with  
        echo '<tr> 
                <th><label for="'.$field['id'].'">'.$field['label'].'</label></th> 
                <td>';  
                switch($field['type']) {  
                    // Presenter Name
                    case 'presenter_name':  

                        $c = $presenter_count;

                        echo '<input type="text" name="'.$field['id'].'['.$c.']" id="'.$field['id'].'-'.$c.'" value="'.$meta[$c].'" size="30" /> 
                            <br /><span class="description">'.$field['desc'].'</span>';  

                    break; 
                } //end switch  
        echo '</td></tr>';  

        }

    } // end foreach  
    echo '</table>'; // end table  
}  

we also need to set up a button for the user to add metabox on command.

The code behind the button:

jQuery('.add-presentation').on('click', function(){
    var c  = jQuery('#meetings_presenter_count').val(); // get presenter count
    var pc = 0;
    if ( c != '' ) {
        pc = c + 1;
        // write a condition that allows for one presenter to exist
        jQuery('#Presentation'+pc).after('Insert Metabox');
        jQuery('#meetings_presenter_count').val(pc); // Increment presenter count
    }else{ // If no presenter box exists make count = 1
        jQuery('#meetings_presenter_count').val('1');
        jQuery('#Meetings').after('Insert Metabox');
    }

});