title: jQuery dynamically add rows and change form input names
body: <p>I need to add new rows and change form input names of new added rows to a new unique name for example  when i click add script will add new rows with input names:</p>
  
  <pre><code> &lt;input type="text" name="11" id="11" /&gt;
   &lt;input type="text" name="12" id="12" /&gt;
   &lt;input type="text" name="13" id="13" /&gt; 
  </code></pre>
  
  <p>Now I need to change new rows input names to a </p>
  
  <pre><code> &lt;input type="text" name="21" id="21" /&gt;
   &lt;input type="text" name="22" id="22" /&gt;
   &lt;input type="text" name="23" id="23" /&gt; 
  </code></pre>
  
  <p>I need to add some code at the and of addTableRow function to be able to do that</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  function addTableRow(jQtable){
      jQtable.each(function(){
          var tds = '&lt;tr&gt;';
          jQuery.each($('tr:last td', this), function() {tds += '&lt;td&gt;'+$(this).html()+'&lt;/td&gt;';});
          tds += '&lt;/tr&gt;';
          if($('tbody', this).length &gt; 0){$('tbody', this).append(tds);
          }else {$(this).append(tds);}
      });
  }
  
  $(function(){
      $('table').on('click','tr a',function(e){
         e.preventDefault();
        $(this).parents('tr').remove();
      });
  });
  
  &lt;/script&gt;
  &lt;form id="form1" name="form1" method="post" action=""&gt;
  &lt;table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans"&gt;
    &lt;tr&gt;
      &lt;td&gt;11
          &lt;label for="11"&gt;&lt;/label&gt;
          &lt;input type="text" name="11" id="11" /&gt;
        &lt;/td&gt;
      &lt;td&gt;12
          &lt;label for="12"&gt;&lt;/label&gt;
          &lt;input type="text" name="12" id="12" /&gt;
        &lt;/td&gt;
      &lt;td&gt;13
          &lt;label for="13"&gt;&lt;/label&gt;
          &lt;input type="text" name="13" id="13" /&gt;
        &lt;/td&gt;
      &lt;td&gt;&lt;a onclick="delTableRow($('#mans'));" href="#"&gt;del&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;button type="button" onclick="addTableRow($('#mans'));"&gt;add row&lt;/button&gt;
  </code></pre>
  
  <p>my idea (not working):</p>
  
  <pre><code>var MaxLegnth=1;    
  function addTableRow(jQtable){
  
      MaxLegnth++;
      //alert(MaxLegnth);
      jQtable.each(function(){
          var tds = '&lt;tr&gt;';
          jQuery.each($('tr:last td', this), function() {tds += '&lt;td&gt;'+$(this).html()+'&lt;/td&gt;';});
          tds += '&lt;/tr&gt;';
          if($('tbody', this).length &gt; 0){$('tbody', this).append(tds);
          }else {$(this).append(tds);}
      });
  
  
      jQuery.each($('tr:last td input', this), function() {$(this).attr('name', 'new_name'); alert($(this).attr('name'));});
  }
  </code></pre>
  
  <p>Here it is a jsFiddle: <a href="http://jsfiddle.net/lolipop/yKjuw" rel="nofollow">http://jsfiddle.net/lolipop/yKjuw</a></p>