[JQuery + HTML] Problema aggiunta/rimozione dinamica campi form

[cdtux]

Buongiorno
Ho un problema con la gestione dinamica di alcuni campi di un form (aggiunta+rimozione).

In sostanza devo aggiungere/rimuovere delle "righe" con diversi campi che devono numerati e, ogni "riga" aggiunta/rimossa (oltre a quella presente di default), deve avere una numerazione univoca e progressiva.

Faccio un esempio per spiegarmi meglio:
l'ID del primo campo (input) della riga di default è: bmpos[0][id_bid]
Ogni riga aggiunta rimossa deve avere l'ID = bmpos[x][id_bid], dove x è un valore univoco.
Quando il form viene inviato devo ottenere un array tipo:

array (size=2)
  '_token' => string 'STRINGAACASACCIO' (length=40)
  'bmpos' => 
    array (size=3)
      0 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'A' (length=1)
      1 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'B' (length=1)
      2 => 
        array (size=2)
          'id_bid' => string '5' (length=1)
          'pos' => string 'C' (length=1)  

Uno screen del form lo trovate in allegato.


Di seguito il codice che del form e lo script:

<div class="input_fields_wrap3"> <!-- Start Dynamic Wrapper -->
    <div id="row1"> <!-- Start Dynamic Container -->
        <div> <!-- Start Dynamic Row -->
            <div>
                <input id="bmpos[0][id_bid]" name="bmpos[0][id_bid]" type="hidden" value="5">
            </div>
            <div>
                <input type="text" name="bmpos[0][pos]" id="bmpos[0][pos]" value="A" />
            </div>
            <div>
                <button class="add_pos_button3">add</button>
            </div>
        </div> <!-- END Dynamic Row -->
    </div> <!-- END Dynamic Container -->
</div> <!-- END Dynamic Wrapper -->  

$(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap3"); //Fields wrapper
    var add_button      = $(".add_pos_button3"); //Add button
    var x = 0; //initlal box count
    var pos = 'A'; //initlal pos value
                            
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //box increment
            pos = String.fromCharCode(pos.charCodeAt() + 1); //increment pos value
                                
            $(wrapper).append('<div id="row'+x+'"><div style="border: 1px solid;"><div><input id="bmpos['+x+'][id_bid]" name="bmpos['+x+'][id_bid]" type="hidden" value="5"></div><div><input type="text" name="bmpos['+x+'][pos]" id="bmpos['+x+'][pos]" value="'+pos+'" /></div><div><a href="#" class="remove_field3">delete</a></div></div></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field3", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').parent('div').parent('div').remove();
        x--; //decrement box
        pos = String.fromCharCode(pos.charCodeAt() - 1); //decrement pos value
    });
});

Il codice così scritto aggiunge/elimina correttamente le righe.
Il problema si presenta quando elimini una riga intermedia (la pos B dello screen) e successivamente ne aggiungi un'altra:
la riga aggiunta ha i medesimi valori dell'ultima riga inserita (pos C dello screen).

Per ovviare a questo inconveniente ho modificato la funzione remove del JS togliendo la parte in cui si decrementano i contatori:

$(wrapper).on("click",".remove_field3", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').parent('div').parent('div').remove();

        //x--;  <---- ELIMINATA
        //pos = String.fromCharCode(pos.charCodeAt() - 1);  <-------- ELIMINATA
    });

In questo modo non si creano doppioni, ma mi si sballa la numerazione visto che non è più progressiva.

Dopo questa estenuante () spiegazione, vi pongo il mio quesito:
Secondo voi è possibile, una volta eliminata una riga (sia intermedia o l'ultima), ricrearla/ripristinarla con gli stessi valori e nella stessa posizione, al click del tasto aggiungi??
A grandi linee come dovrei procedere per fare ciò??
Grazie per l'attenzione

[les2]

si, usi doppio id/contatore

[cdtux]

Originariamente inviato da les2

si, usi doppio id/contatore

Prima di tutto grazie per la risposta .
Però non ho ben capito cosa intendi per doppio id/contatore. Puoi spiegarti meglio??


Comunque per il momento ho risolto (anche se non mi sembra una soluzione tanto "pulita") la parte dei doppioni nel nome delle posizioni:
Ho aggiunto una variabile stringa in cui vengono inserite tutti valori delle posizioni.
Nel pulsante add con una funzione controllo quale manca e la reinserisco (se è stata eliminata), altrimenti incremento il contatore "pos".
Nel pulsante remove reperisco il valore e lo elimino dalla stringa.
Se è stata eliminata l'ultima voce decremento il contatore "pos".

questa è la funzione di check della stringa:

function checkLetter(str) {
   var difference;
   var missing;

   for (var i = 1; i < str.length; i++) {
      difference = str.charCodeAt(i) - str.charCodeAt(i - 1);

      if (difference > 1) {
         missing = str.charCodeAt(i) - 1;
         return String.fromCharCode(missing);
      }
   }
   return null;
}