title: Jquery dynamic rows with form
body: <p>I am trying to change 'inputs' in this demo to 'selects'. The demo works fine, which is at:</p>
  
  <pre>
  http://devblog.jasonhuck.com/assets/infiniteformrows.html
  </pre>
  
  <p>The problem with modified is is everytime you click on add new row, it loses previous row selection, what was selected.</p>
  
  <pre><code>  &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;Infinite Form Rows&lt;/title&gt;
              &lt;script 
                  type="text/javascript" 
                  src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"&gt;
              &lt;/script&gt;
              &lt;script type="text/javascript"&gt;
              $(function(){
                  // start a counter for new row IDs
                  // by setting it to the number
                  // of existing rows
                  var newRowNum = 0;
  
                  // bind a click event to the "Add" link
                  $('#addnew').click(function(){
                      // increment the counter
                      newRowNum += 1;
  
                      // get the entire "Add" row --
                      // "this" refers to the clicked element
                      // and "parent" moves the selection up
                      // to the parent node in the DOM
                      var addRow = $(this).parent().parent();
  
                      // copy the entire row from the DOM
                      // with "clone"
                      var newRow = addRow.clone();
  
                      // set the values of the inputs
                      // in the "Add" row to empty strings
                      $('input', addRow).val('');
                      $('select', addRow).val('');
  
                      // replace the HTML for the "Add" link 
                      // with the new row number
                      $('td:first-child', newRow).html(newRowNum);
  
                      // insert a remove link in the last cell
                      $('td:last-child', newRow).html('&lt;a href="" class="remove"&gt;Remove&lt;\/a&gt;');
  
                      // loop through the inputs in the new row
                      // and update the ID and name attributes
                      $('input', newRow).each(function(i){
                          var newID = newRowNum + '_' + i;
                          $(this).attr('id',newID).attr('name',newID);
                      });
  
  
                      // loop through the inputs in the new row
                      // and update the ID and name attributes
                      $('select', newRow).each(function(i){
                          var newID = newRowNum + '_' + i;
                          $(this).attr('id',newID).attr('name',newID);
                      });
  
                      // insert the new row into the table
                      // "before" the Add row
                      addRow.before(newRow);
  
                      // add the remove function to the new row
                      $('a.remove', newRow).click(function(){
                          $(this).parent().parent().remove();
                          return false;               
                      });
  
                      // prevent the default click
                      return false;
                  });
              });
              &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;form&gt;
                  &lt;table id="tabdata"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Row&lt;/th&gt;
                              &lt;th&gt;Cell 1&lt;/th&gt;
                              &lt;th&gt;Cell 2&lt;/th&gt;
                              &lt;th&gt;Cell 3&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;a id="addnew" href=""&gt;Add&lt;/a&gt;&lt;/td&gt;
                              &lt;td&gt; &lt;select name="1_0" id="1_0" style="width: 160px;"&gt;
  
  
                      &lt;option value="option1"&gt;Option 1&lt;/option&gt;
                  &lt;option value="option2"&gt;Option 2&lt;/option&gt;
                  &lt;option value="option3"&gt;Option 3&lt;/option&gt;                        
                  &lt;option value="option4"&gt;Option 4&lt;/option&gt;                         
                  &lt;option value="option5"&gt;Option 5&lt;/option&gt;
  
                  &lt;/select&gt;
      &lt;/td&gt;
                              &lt;td&gt;&lt;input id="n0_2" name="n0_2" type="text" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input id="n0_3" name="n0_3" type="text" /&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;input id="go" name="go" type="submit" value=" Save " /&gt;
              &lt;/form&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>