Clone table row and increment IDs by 1

Question

In my js code below I am cloning the last row of my table and attempting to increment the IDs by one.

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);
});

}

I have the following code for my table rows in the table:

<table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount"></select>
    </div>      
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

Instead of incrementing the newly added row by one it changes the original row to:

    <table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem2"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount2"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount2"></select>
    </div>      
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

and when I click the button again I get:

    <table id="FinancialDataTable">
<tr>
  <td>
    <div class="form-group">
        <select class="form-control" id="FinancialItem3"></select>
    </div>
</td>
  <td>
    <div class="form-group">
        <input class="form-control" id="FinancialAmount3"></select>
    </div>
  </td>
  <td>
    <div class="form-group">
        <textarea class="form-control" id="FinancialAmount3"></select>
    </div>      
</td>
</tr>
</table>
    <button type="button">Add New Row</button>

Any help would be appreciated! JSFIDDLE

Answer 1

1. Remove the unecesarry $(this).find('tr:last');, you don't need it since you are already using $('#FinancialDataTable tr').each() to loop through the table rows.
2. Remove the i++;, as .each() does the incrementing for you.
3. If you want the ID of the first row to stay #FinancialDataTable and not become #FinancialDataTable1, just add a return in case i is one, which means you are currently looking at the first row.

Your final code would look like this: (JSFiddle)

$('.btn').click(function () {

    $('#FinancialDataTable tbody').append($('#FinancialDataTable tbody tr:last').clone());

    $('#FinancialDataTable tr').each(function(i) {
        if (i === 1)
            return;

        var selectinput = $(this).find('select');
        var textinput = $(this).find('input');
        var textarea = $(this).find('textarea');
        selectinput.eq(0).attr('id', 'FinancialItem' + i);
        textinput.eq(0).attr('id', 'FinancialAmount' + i);
        textarea.eq(0).attr('id', 'FinancialDescription' + i);
    });

});

Answer 2

Here is your updated fiddle - http://jsfiddle.net/7esk26eg/7/

Updated code is below

$('#FinancialDataTable tbody').append($('#FinancialDataTable tbody tr:last').clone());
var rows = $('#FinancialDataTable tr');

var count = rows.length;
var lastRow = rows[count-1];

var selectinput = $(lastRow).find('select');
var textinput = $(lastRow).find('input');
var textarea = $(lastRow).find('textarea');

selectinput.eq(0).attr('id', 'FinancialItem' + count);
textinput.eq(0).attr('id', 'FinancialAmount' + count);
textarea.eq(0).attr('id', 'FinancialDescription' + count);

Once, you have cloned the row, there is no point iterating over all the rows just to go to the last row to change the id's.

Simply, check the length of rows and get the last row element and update the ids.

I hope it helps!

Answer 3

You can increment the id before appending. That way you don't have to loop through all trs.

$('.btn').click(function () {

    var trlength= $('#FinancialDataTable tbody tr').length+1;
    var lasttr=$('#FinancialDataTable tbody tr:last').clone();
       lasttr.find('select').attr('id', 'FinancialItem' + trlength);
       lasttr.find('input').attr('id', 'FinancialAmount' + trlength);
       lasttr.find('textarea').attr('id', 'FinancialDescription' + trlength);                

  $('#FinancialDataTable tbody').append(lasttr);    

});

fiddle updated

Answer 4

function addNewRow(tableId) {

$('#'+tableId).append($('#'+tableId+' tr:last').clone());
$('#'+tableId+' tr').each(function(i) {
                                        /*Find all childs*/
    $(this).find('tr:last');

    var delitem=$(this).find($('input[name="delitem[]"]'));
    var item_code=$(this).find($('input[name="item_code[]"]'));
    var mst_itemid=$(this).find($('input[name="mst_itemid[]"]'));
    var detailId=$(this).find($('input[name="detailId[]"]'));
    var item_name=$(this).find($('input[name="item_name[]"]'));
    var technical_specification=$(this).find($('select[name="technical_specification[]"]'));
    var make_option=$(this).find($('select[name="make_option[]"]'));
    var Unit=$(this).find($('select[name="Unit[]"]'));
    var stock_qty=$(this).find($('input[name="stock_qty[]"]'));
    var requisition_qty=$(this).find($('input[name="requisition_qty[]"]'));
    var total_estd_cast=$(this).find($('input[name="total_estd_cast[]"]'));
    var textarea = $(this).find('textarea');

                                                /* Incremet child ids*/
    i++;
    delitem.eq(0).attr('id', 'delitem_'+i);
    item_code.eq(0).attr('id', 'item_code_'+i);
    mst_itemid.eq(0).attr('id', 'itemid_'+i);
    detailId.eq(0).attr('id', 'detailId_'+i);
    item_name.eq(0).attr('id', 'itemname_'+i);
    technical_specification.eq(0).attr('id', 'technicaSpecification_'+i);
    make_option.eq(0).attr('id', 'make_'+i);
    Unit.eq(0).attr('id', 'Unit_'+i);
    stock_qty.eq(0).attr('id', 'stockqty_'+i);
    requisition_qty.eq(0).attr('id', 'requisitionqty_'+i);
    total_estd_cast.eq(0).attr('id', 'totalestdcast_'+i);
    textarea.eq(0).attr('id', 'remark_'+i);

}); 

}