title: How to edit collection fields (ZF2) on the fly with jQuery
body: <p>I have a Collection created with ZF2. The HTML code looks for eg as follows:</p>
  
  <pre><code>&lt;fieldset id="benutzer"&gt;
  &lt;legend&gt;Team&lt;/legend&gt;
  &lt;div class="controls-row"&gt;
   &lt;span data-template="&lt;input type="hidden" name="projekt[benutzer][__placeholder__][benutzerid]" class="benutzerid" value=""&gt;&lt;input name="projekt[benutzer][__placeholder__][benutzername]" class="benutzername" title="Kollege" placeholder="Name" type="text" value=""&gt;&lt;input type="hidden" name="projekt[benutzer][__placeholder__][bearbeiten]" value="0"&gt;&lt;input type="checkbox" name="projekt[benutzer][__placeholder__][bearbeiten]" title="Bearbeiten" class="bearbeiten" value="1"&gt;&lt;input name="projekt[benutzer][__placeholder__][bemerkung]" title="Bemerkung" placeholder="Bemerkung" type="text" value=""&gt;"&gt;&lt;/span&gt;
  &lt;input type="hidden" value="4" class="benutzerid" name="todo[benutzer][0][benutzerid]"&gt;
  &lt;input type="text" value="Julian" placeholder="Name" title="Kollege" class="benutzername" name="todo[benutzer][0][benutzername]"&gt;
  &lt;input type="hidden" value="0" name="todo[benutzer][0][bearbeiten]"&gt;
  &lt;input class="bearbeiten" type="checkbox" checked="checked" value="1" title="Bearbeiten" name="todo[benutzer][0][bearbeiten]"&gt;
  &lt;input type="text" value="" placeholder="Bemerkung" title="Bemerkung" name="todo[benutzer][0][bemerkung]"&gt;
  &lt;div&gt;
  &lt;div class="row"&gt;
  &lt;input type="hidden" value="5428" class="benutzerid" name="todo[benutzer][0][benutzerid]"&gt;
  &lt;input type="text" value="Hans" placeholder="Name" title="Kollege" class="benutzername" name="todo[benutzer][0][benutzername]"&gt;
  &lt;input type="hidden" value="0" name="todo[benutzer][0][bearbeiten]"&gt;
  &lt;input class="bearbeiten" type="checkbox" checked="checked" value="1" title="Bearbeiten" name="todo[benutzer][0][bearbeiten]"&gt;
  &lt;input type="text" value="" placeholder="Bemerkung" title="Bemerkung" name="todo[benutzer][0][bemerkung]"&gt;
  &lt;div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The user should now be able to check/uncheck the checkboxes, edit the input fields but also delete and/or add rows. The collections of ZF2 need the indexes of its rows to start at 0 and count up each row by 1. This means, if I delete a row and the row was not adventitiously at the end of the collection, I have to correct the indexes. I am trying to do this with jQuery.</p>
  
  <p>And here is my Porblem: If I changed anything before I re-sort the rows (and I do this in the end everytime before I submit the form), the changes are not preserved. If I check a checkbox, if I enter something to the "Bemerkung"-field, everything will be discarded.</p>
  
  <p>Here is my code:</p>
  
  <p>Add a new row:</p>
  
  <pre><code>function add_category( $collectionType ) {
      // Create and append new row
      var $template = $('#'+$collectionType+' span').data('template');
      var $currentCount = $('#'+$collectionType+' .'+$collectionType+'id').length;
      $template = $template.replace(/__placeholder__/g, String($currentCount));
      $newrow = "&lt;div class=\"controls-row new-row\"&gt;"+$template+"&lt;div class=\"span1\"&gt;&lt;a href=\"#\" class=\"_delete-row\"&gt;&lt;i class=\"icon-remove\"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;";
      $('#'+$collectionType).append($newrow);         
      return false;
  }
  </code></pre>
  
  <p>Re-sort the collection:</p>
  
  <pre><code> $.fn.resortCollection = function (){   // execute with Collection-Fieldset!
              $c = 0; 
              $fieldset = $(this);
              // re-sort the rows, indexes
              $.each( $fieldset.find('.controls-row'), function(){            
                  $html = $(this).html();
                  $newhtml = $html.replace(/\[\d+\]/g, '['+$c+']');
                  $(this).html($newhtml);
                  $c++;
              });
          }; 
  </code></pre>
  
  <p>Delete a row in the collection:</p>
  
  <pre><code> $.fn.deleteRow = function (){
              var $row = this.closest('div.controls-row');
              var $fieldset = $row.closest('fieldset');
              $($row).remove();
              $fieldset.resortCollection();
          };
  </code></pre>
  
  <p>How can I access the current state of the DOM including my changes while re-sorting the rows?</p>