中继器字段组

我正在尝试向WordPress插件的设置页面添加一组中继器字段。如果我只有一个中继器字段，则此代码有效，但如果我在同一组中有多个中继器字段时，其行为会出乎意料。它所做的是，在保存设置后，它会自动添加空字段。如果我在组中有两个中继器字段，保存后会添加两个空字段。如果我有两个以上的中继器字段，则保存后的空字段数量会呈指数级增加。我不明白它为什么这么做。同样，对于当前代码，如果我只使用一个中继器字段，则在保存后不会添加空字段（这就是我想要的）。

这是我正在使用的代码：

function ssfrm_render_form(){ ?>
    <form method="post" action="options.php">
    <?php settings_fields('ssfrm_plugin_options'); $options = get_option('ssfrm_options'); ?>
    <script>
        jQuery(document).ready(function($) {
        $('.repeatable-field-add').click(function() {
            var theField = $(this).closest('div.repeatable-wrap')
            .find('.repeatable-fields-list li:last').clone(true);
            var theLocation = $(this).closest('div.repeatable-wrap')
            .find('.repeatable-fields-list li:last');
            $('input', theField).val('').attr('name', function(index, name) {
                return name.replace(/('d+)/, function(fullMatch, n) {
                    return Number(n) + 1;
                });
            });
            $('select', theField).val('').attr('name', function(index, name) {
                return name.replace(/('d+)/, function(fullMatch, n) {
                    return Number(n) + 1;
                });
            });         
            theField.insertAfter(theLocation, $(this).closest('div.repeatable-wrap'));
            var fieldsCount = $('.repeatable-field-remove').length;
            if( fieldsCount > 1 ) {
                $('.repeatable-field-remove').css('display','inline');
            }
            return false;
        });
        $('.repeatable-field-remove').click(function(){
            $(this).parent().remove();
            var fieldsCount = $('.repeatable-field-remove').length;
            if( fieldsCount == 1 ) {
                $('.repeatable-field-remove').css('display','none');
            }
            return false;
        });
    });     
    </script>
    <h4>Configure PDF Output</h4>
    <?php 
    echo '<div class="repeatable-wrap"><ul id="tracks-repeatable" class="repeatable-fields-list">';
    if ( ! empty( $options ) ) {
        $i = 1;
        foreach( $options as $option ) {
            ?> <li>
            <input type="text" name="ssfrm_options[ssfrm_mytext<?php echo $i; ?>]" value="<?php echo $options['ssfrm_mytext'.$i]; ?>" />
            <input type="text" name="ssfrm_options[ssfrm_myothertext<?php echo $i; ?>]" value="<?php echo $options['ssfrm_myothertext'.$i]; ?>" />
            <select name="ssfrm_options[ssfrm_myselect<?php echo $i; ?>]">
            <option value="" <?php selected('', $options['ssfrm_myselect'.$i]); ?>></option>
            <option value="true" <?php selected('true', $options['ssfrm_myselect'.$i]); ?>>Yes</option>
            <option value="false" <?php selected('false', $options['ssfrm_myselect'.$i]); ?>>No</option>
            </select>
            <a class="repeatable-field-remove button" href="#">X</a>
            </li>
            <?php
            $i++;
        }
    } else {
        ?> <li>
        <input type="text" name="ssfrm_options[ssfrm_mytext1]" value="<?php echo $options['ssfrm_mytext1']; ?>" />
        <input type="text" name="ssfrm_options[ssfrm_myothertext1]" value="<?php echo $options['ssfrm_myothertext1']; ?>" />
        <select name="ssfrm_options[ssfrm_myselect1]">
        <option value="" <?php selected('', $options['ssfrm_myselect1']); ?>></option>
        <option value="true" <?php selected('true', $options['ssfrm_myselect1']); ?>>Yes</option>
        <option value="false" <?php selected('false', $options['ssfrm_myselect1']); ?>>No</option>
        </select>
        <a class="repeatable-field-remove button" href="#">X</a>
        </li>
        <?php
    } ?>
    </ul><a class="repeatable-field-add button" href="#">+</a></div>    
    <br />
    <p class="submit"><input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /></p>
    </form>
    </div>
    <?php 
}