title: Clone table row and increment IDs by 1
body: <p>In my js code below I am cloning the last row of my table and attempting to increment the IDs by one.</p>
  
  <pre><code>function addNewRow() {
  
  $('#FinancialDataTable tbody').append($('#FinancialDataTable tbody tr:last').clone());
  
  $('#FinancialDataTable tr').each(function(i) {
  $(this).find('tr:last');
  var selectinput = $(this).find('select');
  var textinput = $(this).find('input');
  var textarea = $(this).find('textarea');
  i++;
  selectinput.eq(0).attr('id', 'FinancialItem'+i);
  textinput.eq(0).attr('id', 'FinancialAmount'+i);
  textarea.eq(0).attr('id', 'FinancialDescription'+i);
  });
  
  }
  </code></pre>
  
  <p><strong>I have the following code for my table rows in the table:</strong></p>
  
  <pre><code>&lt;table id="FinancialDataTable"&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;select class="form-control" id="FinancialItem"&gt;&lt;/select&gt;
      &lt;/div&gt;
  &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" id="FinancialAmount"&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea class="form-control" id="FinancialAmount"&gt;&lt;/select&gt;
      &lt;/div&gt;      
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
      &lt;button type="button"&gt;Add New Row&lt;/button&gt;
  </code></pre>
  
  <p>Instead of incrementing the newly added row by one it changes the original row to:</p>
  
  <pre><code>    &lt;table id="FinancialDataTable"&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;select class="form-control" id="FinancialItem2"&gt;&lt;/select&gt;
      &lt;/div&gt;
  &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" id="FinancialAmount2"&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea class="form-control" id="FinancialAmount2"&gt;&lt;/select&gt;
      &lt;/div&gt;      
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
      &lt;button type="button"&gt;Add New Row&lt;/button&gt;
  </code></pre>
  
  <p>and when I click the button again I get:</p>
  
  <pre><code>    &lt;table id="FinancialDataTable"&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;select class="form-control" id="FinancialItem3"&gt;&lt;/select&gt;
      &lt;/div&gt;
  &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" id="FinancialAmount3"&gt;&lt;/select&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea class="form-control" id="FinancialAmount3"&gt;&lt;/select&gt;
      &lt;/div&gt;      
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
      &lt;button type="button"&gt;Add New Row&lt;/button&gt;
  </code></pre>
  
  <p>Any help would be appreciated! <a href="http://jsfiddle.net/7esk26eg/4/" rel="nofollow">JSFIDDLE</a></p>