动态添加多个元段

Question

我想做的是动态添加元框或元框的一部分。第一部分涵盖在这个问题中：https://wordpress.stackexchange.com/questions/19838/create-more-meta-boxes-as-needed

以上链接详细说明了动态添加歌曲标题和跟踪号码到“我的曲目”元框。我该如何添加另一层？例如，能够添加专辑，然后添加歌曲标题和曲目编号等。

编辑：只是为了显示一些代码，这是我放在一起的内容。

function menu_meta_box_callback( $post ) {

    wp_nonce_field( 'menu_save', 'menu_meta_box_nonce' ); ?>

    <div id="meta-inner">


    <?php
    $menus = get_post_meta( $post->ID, 'menus', true);
    $count = 0;
    var_dump($menus);
    if (is_array($menus)) {
        foreach ($menus as $menu => $item) {  ?>
            <div style="border: 2px solid">
                <label for="menus['+count+'][menu-name]">Section Name</label>
                <input type="text" id="menu-section" name="menus[<?php echo $count ?>][menu-name]" value="<?php echo esc_attr( $item["menu-name"]) ?>" />
                <div>
                    <h3>Items</h3>
                    <label for="menus[<?php echo $count ?>][item-name]">Menu Item</label>
                    <input type="text" id="menu_item" name="menus[<?php echo $count ?>][item-name]" value="<?php echo esc_attr( $item["item-name"] ) ?>" />
                    <label for="menus[<?php echo $count; ?>][item-price]">Item Price</label>
                    <input type="number" id="menu_price" name="menus[<?php echo $count; ?>][item-price]" value="<?php echo esc_attr( $item["item-price"] ) ?>" />
                    <label for="menus[<?php echo $count; ?>][item-desc]">Item Description</label>
                    <textarea id="menu_desc" name="menus[<?php echo $count; ?>][item-desc]" value="<?php echo esc_attr( $item["item-desc"] ) ?>"><?php echo esc_attr( $item["item-desc"] ) ?></textarea>
                    <span class="remove-item">Remove Item</span>
                </div>
                <span id="item-here"></span>
                <span class="add-item"><?php _e('Add Items'); ?></span>
            </div>
            <?php $count++; 
        }
    } ?>
    <script>
        var $ =jQuery.noConflict();
        $(document).ready(function() {
            var count = <?php echo $count; ?>;
            // Add a new section 
            $(".add-section").click(function() {
                count = count + 1;
                $('#section-here').append('<div class="section"><label for="menus['+count+'][menu-name]">Section Name</label><input type="text" id="menu_name" name="menus['+count+'][menu-name]" value="" /><span class="remove-section">Remove Section</span><div><label for="menus['+count+'][item-name]">Menu Item</label><input type="text" id="menu_item" name="menus['+count+'][item-name]" value="" /><label for="menus['+count+'][item-price]">Item Price</label><input type="number" id="menu_price" name="menus['+count+'][item-price]" value="" /><label for="menus['+count+'][item-desc]">Item Description</label><textarea id="menu_desc" name="menus['+count+'][item-desc]" value=""></textarea><span class="remove-item">Remove Item</span></div><span id="item-here"></span><span class="add-item"><?php _e('Add Items'); ?></span><span class="remove-section">Remove Section</span></div>');
                $("#menu_item:last-of-type").focus();
                return false;
            });
            // Add items to current section
            $(".add-item").click(function() {
                count = count + 1;
                $('#item-here').append('<div><label for="menus['+count+'][item-name]">Menu Item</label><input type="text" id="menu_item" name="menus['+count+'][item-name]" value="" /><label for="menus['+count+'][item-price]">Item Price</label><input type="number" id="menu_price" name="menus['+count+'][item-price]" value="" /><label for="menus['+count+'][item-desc]">Item Description</label><textarea id="menu_desc" name="menus['+count+'][item-desc]" value=""></textarea><span class="remove-item">Remove Item</span>');
                $("#menu_item:last-of-type").focus();
                return false;
            });
             $(".remove-item").live('click', function() {
                $(this).parent().remove();
            });
            $(".remove-section").live('click', function() {
                $(this).parent().remove();
            });
        });
    </script>
    </div>
    <span id="section-here"></span>
    <span class="add-section"><?php _e('Add Section'); ?></span>

回调..

<?php }

function menu_save_postdata( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
        return;
        if ( !isset( $_POST['menu_meta_box_nonce'] ) )
        return;

    if ( !wp_verify_nonce( $_POST['menu_meta_box_nonce'], 'menu_save' ) )
        return;
    delete_post_meta( $post_id, 'menus' );
    // sort through menus array and save
    $menus = $_POST["menus"];
    foreach ($menus as $menu) {
        update_post_meta($post_id,'menus',$menus);  
    }
}
add_action( 'save_post', 'menu_save_postdata' );

?>

保存功能

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.header{
  text-align: center;
  border: 2px solid blue;
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #efefef;
  text-align: center;
  border: 2px solid blue;
}
h1{
  margin: auto;
}
.body{
  border: 2px solid blue;
  margin-top: 10px;
}
.inline{
  display: inline-block;
}

.no-margin{
  margin: 0px;
}

label{
  width: 140px;
  margin-right: 5px;
  text-align: left;
  white-space: nowrap;
}

input{
  margin-left: 0px;
  margin-top: 10px;
}

.left_margin{
  margin-top: 10px;
  margin-left: 230px;
}

@media screen and (min-width: 768px){
  label{
    text-align: right;
  }

  input{
    margin-left: 10px;
    margin-top: 10px;
  }
}

上面的代码将添加部分和字段并删除它们。问题是，当我保存项目时，它们被附加到第1部分而不是它们被添加到的部分。此外，添加项目功能不适用于尚未保存的动态创建的部分