How to create a repeatable / reusable divs in the metabox?

I have a meta box:

<?php
function custom_meta_box_markup() { 
    global $post;
    $meta_box_text = get_post_meta( $post->ID, 'meta-box-text', true );
    $meta_box_text_day = get_post_meta( $post->ID, 'meta-box-text-day', true );
    ?>
        <div class="schedule-wrapper" style="border-bottom: 1px solid #D5D5D5; padding-bottom: 5px;">
            <div><input name="meta-box-text-day" type="text" placeholder="Day" value="<?php if ($meta_box_text_day) { echo $meta_box_text_day; }?>"></div>
            <div><input name="meta-box-text" type="text" placeholder="Time" value="<?php if ($meta_box_text) { echo $meta_box_text; }?>"></div>           
        </div>
        <button name ="add-more" style="width: 100%; margin-top: 5px;"> Add More.. </button>
<?php }

function add_custom_meta_box()
{
    $id             = 'demo-meta-box';
    $title          = 'Schedule';
    $callback       = 'custom_meta_box_markup';
    $screen         = 'dramas';
    $context        = 'side';
    $priority       = 'high';
    $callback_args  = 'null';
    add_meta_box($id, $title, $callback, $screen, $context, $priority, $callback_args);
}
add_action("add_meta_boxes", "add_custom_meta_box");

I save the meta box like this:

function save_custom_meta_box($post_id)
{
    global $post;   
    //skip auto save
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }
    //check for DRAMAS post type only
    if( $post->post_type == "dramas" ) {
        if( isset($_POST['meta-box-text']) ) { update_post_meta( $post->ID, 'meta-box-text', $_POST['meta-box-text'] );}
        if( isset($_POST['meta-box-text-day']) ) { update_post_meta( $post->ID, 'meta-box-text-day', $_POST['meta-box-text-day'] );}
    }
}

add_action("save_post", "save_custom_meta_box", 10, 3);

The out put of the code in admin panel looks like this and it works fine. It saves the values and displays.

By default when we visit to the admin panel:

BEFORE SAVE

After save a value:

AFTER SAVE

Everything works fine in saving and displaying values.

Now I want to add more of schedule-wrapper divs one below another with it’s inside contents when the button add-more is clicked.

How can I do that.?

and how to get those value in the front end?

Solutions Collecting From Web of "How to create a repeatable / reusable divs in the metabox?"