title: jQuery Duplicate Table row and assign new id to duplicate table row
body: <p>I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.</p>
  
  <p>jsp code:</p>
  
  <pre><code>&lt;div id="invTruck" class="invTruck"&gt;
              &lt;table id="tbl_invTruck" width="100%"  border="0"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td width="15%" style="display:none;"&gt;&lt;center&gt;Work Order Id&lt;/center&gt;&lt;/td&gt;
                      &lt;td width="17%"&gt;&lt;center&gt;Truck Type&lt;/center&gt;&lt;/td&gt;
                      &lt;td width="17%"&gt;&lt;center&gt;Licences Plate #&lt;/center&gt;&lt;/td&gt;
                      &lt;td width="17%"&gt;&lt;center&gt;Driver ID&lt;/center&gt;&lt;/td&gt;
                      &lt;td width="17%"&gt;&lt;center&gt;Max Haulage Weight&lt;/center&gt;&lt;/td&gt;
                      &lt;td width="17%"&gt;&lt;center&gt;Job Number&lt;/center&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td style="display:none;"&gt;&lt;input name="wInv_work_Id" type="text"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)"&gt;
                          &lt;option disabled selected hidden value=""&gt;Select A Truck Type&lt;/option&gt;
                          &lt;%while(rsinvTru1.next()){%&gt;
                           &lt;option&gt;&lt;%=rsinvTru1.getString(1)%&gt;&lt;/option&gt;
                          &lt;%}%&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required&gt;
                          &lt;option disabled selected hidden value=""&gt;Select A Truck&lt;/option&gt;
  
                          &lt;/select&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input name="driver_emp_Id" type="text"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input name="invTru_MaxHw" type="text"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input name="" type="text"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;table width="100%" height="50%" border="0"&gt;
                  &lt;tr&gt;
                      &lt;td width="50%"&gt;&lt;input class="buttonCreateInv" id="btn_AddTruck" type="button"  value="Add A Truck"&gt;&lt;/td&gt;
                      &lt;td width="50%"&gt;&lt;input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>JQuery Javascript:</p>
  
  <pre><code>$(document).ready(function(){
      $("#btn_AddTruck").click(function(){
         var $tableBody = $('#tbl_invTruck').find("tbody"),
          $trLast = $tableBody.find("tr:last"),
          $trNew = $trLast.clone();
  
      $trLast.after($trNew); 
  
      });
  });
  </code></pre>
  
  <p>The expected output i would like is for the duplicated table row
   
  where id in id1 is the orignal tables td id and 1 is appended to it.
  and that if i was to add another row to the table
  
  where id in id2 is the orignal tables td id and 2 is appended to it.</p>