Repeatable option fields not saving

Question

I have an options page for a plugin and I'm trying to create a repeatable groups of fields. I have the fields and the JS to clone the fields, but I can't get them to save.

/**
 * Add Mimes
 *
 * @since      0.0.1
 * @return     void
 */
public function add_mimes_callback() {
  $option       = $this->ordered_uploads_options;
  $mimes        = $option[OU_PL_PREFIX . '_mimes']; 
  $mime_folders = $this->mime_folders(); 
  ?>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('#add-row').on('click', function() {
        var row = $('.empty-row.screen-reader-text').clone(true);
        row.removeClass('empty-row screen-reader-text');
        row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
        jQuery('input, select', row).val('').attr('name', function(index, name) {
          return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
          });
        });
        return false;
      });

      $('.remove-row').on('click', function() {
        $(this).parent().parent().remove();
        return false;
      });
    });
  </script>
  <table id="repeatable-fieldset-one" width="100%">
    <thead>
      <tr>
        <th>Extention</th>
        <th>Filetype</th>
        <th>Folder</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    <?php
      $counter = 1;
      if( $mimes ) {
        foreach( $mimes as $mime ) {
          $counter++;
          $extention = ( $mime[OU_PL_PREFIX . '_mime_extention']   ? esc_attr( $mime[OU_PL_PREFIX . '_mime_extention'] )   : '' );  
          $filetype  = ( $mime[OU_PL_PREFIX . '_mime_file_type']   ? esc_attr( $mime[OU_PL_PREFIX . '_mime_file_type'] )   : '' );
          $folder    = ( $mime[OU_PL_PREFIX . '_mime_mime_folder'] ? esc_attr( $mime[OU_PL_PREFIX . '_mime_mime_folder'] ) : '' );
          ?>
          <tr>
            <td>
              <input type="text" name="ou_mimes['ou_mime_extention_<?php echo $counter; ?>']" value="<?php echo $extention; ?>" class="all-options">
            </td>
            <td>
              <input type="text" name="ou_mimes['ou_mime_file_type<?php echo $counter; ?>']" class="all-options">
            </td>
            <td>
              <select name="ou_mimes['ou_mime_folder<?php echo $counter; ?>']">
                <?php foreach ( $mime_folders as $label => $value ) : ?>
                  <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
                <?php endforeach; ?>
              </select>
            </td>
            <td>
              <a class="button remove-row" href="#">Remove</a>
            </td>
          </tr>
          <?php
        }
      } else {
        ?>
        <tr>
          <td>
            <input type="text" name="ou_mimes['ou_mime_extention_<?php echo $counter; ?>']" class="all-options">
          </td>
          <td>
            <input type="text" name="ou_mimes['ou_mime_file_type<?php echo $counter; ?>']" class="all-options">
          </td>
          <td>
            <select name="ou_mimes['ou_mime_folder<?php echo $counter; ?>']">
              <?php foreach ( $mime_folders as $label => $value ) : ?>
                <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
              <?php endforeach; ?>
            </select>
          </td>
          <td>
            <a class="button remove-row" href="#">Remove</a>
          </td>
        </tr>
        <?php
      }
      ?>
      <tr class="empty-row screen-reader-text">
        <td>
          <input type="text" name="ou_mimes['ou_mime_extention_1']" class="all-options">
        </td>
        <td>
          <input type="text" name="ou_mimes['ou_mime_file_type_1']" class="all-options">
        </td>
        <td>
          <select name="ou_mimes['ou_mime_folder_1']">
            <?php foreach ( $mime_folders as $label => $value ) : ?>
              <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
            <?php endforeach; ?>
          </select>
        </td>
        <td>
          <a class="button remove-row" href="#">Remove</a>
        </td>
      </tr>
      <?php
    ?> 
    </tbody>
  </table>
  <p><a id="add-row" class="button" href="#">Add Mime</a></p>
  <?php
} // end mime_repeater

Answer 1

Use a html setup similar to the following:

<input name="multi[0]" />
<input name="multi[1]" />
<input name="multi[2]" />
etc..

Please be more specific to get better answers. For example don't paste all your code but just a few snippets of it what are relevant to your question.