jQuery Sortable Rearrange Input Names and Sorting

Question

I am trying to rearrange all the input fields' name within a field group with current position of the field group after sorting the group with jQuery sortable. I just have to rearrange the position number (0 based) in input fields' name that are [0], [1], [2], [4], [4] etc.

Here is the basic HTML

<div class="sortable">
    <div class="field-group">
        <div class="accordian-header"></div>
        <div>
            <input type="text" name="section[0]text" value="">
            <textarea name="section[0]textarea"></textarea>
            <input type="checkbox" name="section[0]check" value="1">
        </div>
    </div>
    <div class="field-group">
        <div class="accordian-header"></div>
        <div>
            <input type="text" name="section[1]text" value="">
            <textarea name="section[1]textarea"></textarea>
            <input type="checkbox" name="section[1]check" value="1">
        </div>
    </div>
    <div class="field-group">
        <div class="accordian-header"></div>
        <div>
            <input type="text" name="section[2]text" value="">
            <textarea name="section[2]textarea"></textarea>
            <input type="checkbox" name="section[2]check" value="1">
        </div>
    </div>
    <div class="field-group">
        <div class="accordian-header"></div>
        <div>
            <input type="text" name="section[3]text" value="">
            <textarea name="section[3]textarea"></textarea>
            <input type="checkbox" name="section[3]check" value="1">
        </div>
    </div>
    <div class="field-group">
        <div class="accordian-header"></div>
        <div>
            <input type="text" name="section[4]text" value="">
            <textarea name="section[4]textarea"></textarea>
            <input type="checkbox" name="section[4]check" value="1">
        </div>
    </div>
</div>

And, here is the closest I got so far.

jQuery( document ).ready(function($) {
    $('.sortable' ).each(function() {
        $(this).accordion({
            header: '> .field-group > .accordian-header',
            collapsible: true,
            active: false,
            animate: 300,
        }).sortable({
            revert: true,
            axis: 'y',
            handle: '.accordian-header',
            stop: function( event, ui ) {
                ui.item.children( '.accordian-header' ).triggerHandler( 'focusout' );
                $( this ).accordion( 'refresh' );
                $.map($(this).find('.field-group'), function(el) {
                    var inputs = $(this).find('input');
                    inputs.each(function () {
                        this.name = this.name.replace(/(\[\0-9\])/, '[' + $(el).index() + ']');  
                    });
                    //console.log( $(el).index() );
                });
            },
        });
    });    
});

I also tried many answers from here, but no luck. Here is the latest fiddle I made with my code.

http://jsfiddle.net/itsabhik/oj3awz78/3/

How can I achieve this?

Answer 1

I would use $(".field-group").each() instead. Working example: http://jsfiddle.net/Twisty/fhmgrjuq/

Snippet

      stop: function(event, ui) {
        ui.item.children('.accordian-header').triggerHandler('focusout');
        $(this).accordion('refresh');

        var i = 0;
        $('.field-group').each(function(k, el) {
          $(el).find("input").attr("name", 'section[' + i + ']text');
          $(el).find("textarea").attr("name", 'section[' + i + ']textarea');
          $(el).find("checkbox").attr("name", 'section[' + i + ']check');
          i++;
        });
      }

I suspect it can be improved. This works as you described it. After each sort, the index number in the name attribute of each input element is updated to reflect the new order.