Zmiana kolejności elementów i nazwy dla pola input Opcje

[mateokr92]

Cześć, od razu opiszę co chcę osiągnąć.

Dane wejściowe:
Mam grupę elementów z klasą "box". Każdy taki div zawiera kilka pól formularza (w tym <input> typu radio). Elementy te można sortować (przenosić nad lub pod inne elementy) z wykorzystaniem funkcji sortable z jQuery UI.
Każdy element <input> z danego boxa posiada nazwę w postaci "box-[numerIndeksu][nazwaPola]".
Przed sortowaniem kolejne boxy mają numerIndeksu ustawiony rosnąco, zaczynając od indeksu 0.

Dane wyjściowe:
Po przeniesieniu elementu boksa należy zmienić tak numerIndeksu w nazwie każdego pola <input> aby zachować rosnącą numerację indeksów poczytnając od 0 dla wszystkich kolejnych boxów.


Poniżej zamieszczam kod funkcji, która jest wykonywana po zakończeniu przenoszenia. Oraz układ boxów zaraz po przeniesieniu. Efekt jaki chce osiągnąć, to aby pierwszy box miał indeks [0], drugi boks [1], trzeci [2], itd.

Problem mam z polem typu radio. Muszę uwzględnić sytuacje w której może być że jeden box ma trzy opcje radio, a drugi box ma inną liczbę opcji niż trzy (np. dwie).
Mój kod obecnie w pierwszym boxie przy radio "Option 1" otrzymuje nazwę taką samą jak dla boksa drugiego - najpierw zmienia go na [tmp] a następnie na indeks [1] a powinien mieć indeks [0].

Kod java script:

[HTML] pobierz, plaintext 
$(document).ready(function() {
$('.container').find('.box').each(function(idx) {
  $(this).find('input').each(function() {
    let field = $(this);
    let fieldName = field.attr('name');
    let mIndex = 0;
    let fieldNameMatch = fieldName.match(/(.+)\[(\d+)](.+)/);
    let fieldTmp = $('.container').find('[name="' + fieldNameMatch[1] + '[' + idx + ']' + fieldNameMatch[3] + '"]');
 
    console.log(field);
 
    /* Tmp */
    fieldTmp.each(function() {
      $(this).attr('name', fieldNameMatch[0].replace(/\[\d+]/, '[tmp]'));
      $(this).attr('id', $(this).attr('name').replace(/[\[\]]/g, '#').replace(/\#+/g, '-').replace(/[-]+$/g, ''));
      $(this).closest('.field').children('label').attr('for', $(this).attr('id'));
    });
 
    /* Field */
    field.attr('name', fieldNameMatch[0].replace(/\[\d+]/g, function(match, pos, original) {
      return mIndex++ === 0 ? '[' + idx + ']' : match;
    }));
    field.attr('id', field.attr('name').replace(/[\[\]]/g, '#').replace(/\#+/g, '-').replace(/[-]+$/g, ''));
    field.closest('.field').children('label').attr('for', field.attr('id'));
 
    /* Tmp index */
    fieldTmp.each(function() {
      $(this).attr('name', fieldNameMatch[0].replace(/\[\w+]/, '[' + fieldNameMatch[2] + ']'));
      $(this).attr('id', $(this).attr('name').replace(/[\[\]]/g, '#').replace(/\#+/g, '-').replace(/[-]+$/g, ''));
      $(this).closest('.field').children('label').attr('for', $(this).attr('id'));
    });
 
  });
});
});
 
[HTML] pobierz, plaintext 

https://jsfiddle.net/pbLkabhe/4/

Nie za bardzo wiem, czemu tak się dzieje.

[trueblue]

Bardzo to zagmatwane.
Jeśli masz mało różnych typów pól, tj. w każdym boksie występuje tylko tekstowy input i radio, to wprowadź nazwy na stałe do kodu - czyli aktualna nazwa Cię nie interesuje, wprowadzasz nową, zgodnie z nową numeracją.
Jeśli jest więcej różnych typów pól lub grup pól, to zapisz oryginalną nazwę (bez numeracji) w atrybucie np.: data-original-name, a podczas nowego numerowania pobieraj ją stamtąd.

P.S. Do grupowania pól używa się <fieldset>.