Hi, all -

I've got three connected sortable lists that aren't updating correctly when I add them to the database. The values and internal order changes will save when I submit but any changes I make between lists (if I move an item from list 3 to list 1, for instance) won't stick. What am I missing?

Here's my relevant HTML:



Code:
   <ul id="recrm_lead_connected-repeatable" class="custom_repeatable connected_field">
      <p><a class="repeatable-add button" href="#">+</a></p>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][0][0]]" placeholder="" value="TEST" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][0][1]]" placeholder="" value="test2" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <span class="description">These are connected fields.</span>
    </ul>

    <ul id="recrm_lead_connected-repeatable" class="custom_repeatable connected_field">
      <p><a class="repeatable-add button" href="#">+</a></p>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][1][0]]" placeholder="" value="test3" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][1][1]]" placeholder="" value="test4" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <span class="description">These are connected fields.</span>
    </ul>

    <ul id="recrm_lead_connected-repeatable" class="custom_repeatable connected_field">
      <p><a class="repeatable-add button" href="#">+</a></p>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][2][0]]" placeholder="" value="Other Choice 5" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <li><span class="sort hndle">::</span>
        <input class="regular-text" type="text" id="recrm_lead_connected" name="recrm_options[recrm_lead_connected][2][1]]" placeholder="" value="Other Choice 6" />
        <a class="repeatable-remove button" href="#">-</a></li>
      <span class="description">These are connected fields.</span>
    </ul>
... and here's the relevant JS:
Code:
    jQuery(document).ready(function(){
    jQuery('.repeatable-add').click(function() { 
            field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true); 
            fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last'); 
            jQuery('input', field).val('').attr('name', function(index, name) { 
                return name.replace(/\[([0-9]+)\]/, function(fullMatch, n) { 
                    var b = Number(n) + 1;
                    return "[" + b + "]";
                }); 
            }) 
            field.insertAfter(fieldLocation, jQuery(this).closest('td')) 
            return false; 
        }); 
         
        jQuery('.repeatable-remove').click(function(){
            var inputCount = jQuery(this).closest('ul').children().length;
            if(inputCount > 1) {
                jQuery(this).parent().remove(); 
                return false; 
            }
        }); 
             
        jQuery('.custom_repeatable').sortable({ 
            opacity: 0.6, 
            revert: true,
            connectWith: '.connected_field',
            cursor: 'move', 
            handle: '.sort',
            });
    });