title: jQuery to clone a table with new id, how to write below code collectively
body: <p>I'm having trouble with some jQuery stuff, please help me out. Below is my form structure:</p>
  
  <pre><code>&lt;form name="imageUploadForm" id="imageUploadForm" action="" method="POST" enctype="multipart/form-data" &gt;
     &lt;table border="0" width="80%" cellpadding="2" cellspacing="3" id="mainTable"&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
              &lt;td&gt; 
                    &lt;table border="0" id="imageTable" class="imageTable"&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;label for="image_title"&gt;&lt;sup&gt;*&lt;/sup&gt;Image Title:&lt;/label&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input type="text" name="image_title[]" id="image_title[]"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;sup&gt;*&lt;/sup&gt;Image:&lt;/td&gt;
                        &lt;td&gt;&lt;input type="file" name="main_image[]" id="main_image[]" &gt;&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;&lt;input type="button" id="addRow" value="Add More" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
      &lt;/table&gt;    
  &lt;/form&gt; 
  </code></pre>
  
  <p>What I want is this: when I click on an Add More Button, a new table (i.e. clone of imagetable) appends to mainTable, here is my jQuery Code:</p>
  
  <pre><code>jQuery(document).ready(function() {
      var count=1;
      jQuery('#addRow').click( function () {
          var Clonedtable = jQuery("#imageTable").clone(true);
          Clonedtable.appendTo('table#mainTable');
      })
  });
  </code></pre>
  
  <ul>
  <li>I need to create different IDs for table, and the two inputs</li>
  <li>Is it valid to make an array of IDs?</li>
  <li>I want to append the cloned table append the tbody's last table, not just after the main ImageTable</li>
  <li>Both inputs should be empty.</li>
  </ul>
  
  <p>Please suggest me optimized method. Thanks.</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> i have changed the table structure ( i was wrong before ), i want to change <code>for</code> attribute value of label according to next input id  and delete <code>&lt;sup&gt;*&lt;/sup&gt;</code> tag. i write below code, everything is working fine, but i need to write collectively, i don't understand how to write it collectively, please suggest me </p>
  
  <pre><code> jQuery('#addRow').live('click', function () {
          var quantity = jQuery('table[class^=imageTable]').length;
          var clonedRow = jQuery('#mainTable &gt; tbody &gt; tr:first').clone(true);
          var textID = clonedRow.find(':text').attr('id');
          clonedRow.find('label').attr('for', function () {
              return textID + quantity;
          });
          clonedRow.find('th').text('Image '+(++quantity) + ' :');
          clonedRow.find('sup').remove();     
          clonedRow.attr('id', function () {
              return this.id + quantity;
          }).find(':text,:file').attr('id', function () {
              return this.id + quantity;
          }).val('').end().appendTo('#mainTable');
      });
  </code></pre>