Repeater field groups - php

Question

I'm trying to add a group of repeater fields to a WordPress plugin's settings page. This code works if I only have one repeater field, but if I have more than one repeater field in the same group, it behaves unexpectedly. What it does is, after saving the settings, it automatically adds empty fields. If I have, say, two repeater fields in the group, it will add two empty fields after saving. If I have more than two repeater fields, the number of empty fields after saving increases exponentially. I can't figure out why it's doing this. Again, with the current code, if I use only one repeater field, no empty fields are added after saving (that's what I want).
Here's the code I'm using:
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
}

Answer 1

I've figured out the problem. After saving, it was repeating the fields group for each option in the group. I solved the problem by wrapping the repeatable section inside a conditional statement, checking if the first required field has a null value:
if ( $options['ssfrm_mytext'.$i] !== null ) {
// repeatable fields section
}