title: jQuery add a row in a table with increment order
body: <p>I have a <code>table</code>. Inside that there is a <code>single row for form input elements</code>. I have put a <code>button</code> named as <code>add line</code> just <code>below that table</code>. When a user <code>clicks on the button add line</code> it will <code>add another row in that table</code>. But here I need that when a user will click on the button add line it will <code>add another row with increment id</code>. Suppose now I have the <code>row_1 id is visible</code>. When the user will click on the <code>add line button</code> it will show another row but the <code>newly added row's id will be row_2</code>. Here is the code that I have done yet</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-IN"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;script type="text/javascript" src="jquery1.7.2.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
        jQuery("#add-line").click(function() {
          var row = jQuery('.prototype tr').clone(true);
          row.find("input:text").val("");
          row.appendTo('.form-fields table');
          return false;
      });
  });
  &lt;/script&gt;
    &lt;div id="form"&gt;
    &lt;table id="form-headings"&gt;
      &lt;tr&gt;
        &lt;td width="15%"&gt;Id&lt;/td&gt;
        &lt;td width="16%"&gt;Name&lt;/td&gt;
        &lt;td width="13%"&gt;Col3&lt;/td&gt;
        &lt;td width="14%"&gt;Col4&lt;/td&gt;
        &lt;td width="12%"&gt;Col5&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;&lt;!--table#form-headings--&gt;
    &lt;div id="row_1"&gt;
    &lt;div class="form-fields"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" id="form_id" size="5px"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="form_name" size="5px"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="form_col3" size="5px"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="form_col4" size="5px"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="form_col5" size="5px"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;&lt;!--.form-fields--&gt;
    &lt;/div&gt;&lt;!--#row_01--&gt;
    &lt;input type="button" id="add-line" value="Add Line" /&gt;
    &lt;/div&gt;&lt;!--#form--&gt;
    &lt;table class="prototype" style="display:none"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="text" id="form_id" size="5px"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="form_name" size="5px"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="form_col3" size="5px"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="form_col4" size="5px"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="form_col5" size="5px"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;&lt;!--table.prototype--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>