jQuery Clone and add row to last row

Question

I want to add a row whenever the user click on the new button.I want to clone the row "tRow0" and add it to the last row of the table "tblEquipment tbody".I wrote a JavaScript function for adding the row(AddEquipment).The problem is that the row is not getting added in the last row.

clone row : tRow0 last row : tRow1

Actually the new row must added after the "tRow1" row.But the new row get added below "trActivity1_2" row.Please provide me the solution.

my javascript function: function AddEquipment() {

var row = jQuery('#tRow0').clone(true).show().insertAfter('#tblEquipment tbody>tr:last'); 
var index = document.getElementById("hdnMaxEqpId").value; 

jQuery("#tblEquipment tbody>tr:last").attr("id", "tRow" + index) 
jQuery("td:eq(0) input", row).attr("id", "chkEqp" + index);
jQuery("td:eq(1) div:eq(0)", row).attr("id", "divEqpName" + index);
jQuery("td:eq(1) input:eq(0)", row).attr("id", "hdnWODefEqpId" + index).attr("name", "hdnWODefEqpId" + index);
jQuery("td:eq(1) input:eq(1)", row).attr("id", "hdnEquipmentId" + index).attr("name", "hdnEquipmentId" + index).attr("onpropertychange","");
jQuery("td:eq(1) input:eq(2)", row).attr("id", "txtEquipment" + index).attr("name", "txtEquipment" + index);   
jQuery("td:eq(1) img", row).attr("id", "imgshowEquipmentTree" + index).attr("onclick", "");  
jQuery("td:eq(1) div:eq(1)", row).attr("id", "divEqpImage" + index);  
jQuery("td:eq(2) div", row).attr("id", "divEqpHierarchy" + index);
jQuery("td:eq(3) textarea", row).attr("id", "txtEqRemarks" + index);
jQuery("td:eq(4) img", row).attr("id", "imgEqAttachment" + index);   

}

my aspx page:

<table id="tblEquipment">
    <thead>
        <tr>
            <th>
            </th>
            <th>
                Equipment</th>
            <th>
                Hierarchy</th>
            <th>
                Remarks</th>
            <th>
                Attachment</th>
            <th>
                Total Cost</th>
        </tr>
    </thead>
    <tbody id="tbEquipment">
        <tr id="tRow0" class="trChildItem">
            <td>
                <input id="chkEqp0" name="chkEqp0" type="checkbox" />
            </td>
            <td>
                <div id="divEqpName0">
                    <input id="hdnWODefEqpId0" name="hdnWODefEqpId0" type="hidden" value="0" />
                    <input id="hdnEquipmentId0" name="hdnEquipmentId0" 
                        onpropertychange="AutoSaveEquipment(0);" type="hidden" value="0" />
                    <input id="txtEquipment0" class="clsSpText" name="txtEquipment0" readonly />

                </div>
                <div id="divEqpImage0">
                </div>
            </td>
            <td>
                <div id="divEqpHierarchy0">
                    &nbsp;</div>
            </td>
            <td>
                <textarea id="txtEqRemarks0" class="clsSpTextArea" cols="20" 
                    name="txtEqRemarks0" rows="1"></textarea>
            </td>
            <td>

            </td>
        </tr>
        <tr id="tActMaster0" class="trInnerChildItem">
            <td>
            </td>
            <td colspan="5">
                <div id="divActivitiesdetails0">
                </div>
            </td>
        </tr>
        <tr id="tRow1" class="trChildItem">
            <td>
                <input id="chkEqp1" runat="server" type="checkbox" />
                <div id="divEqpEdit1">
                </div>
            </td>
            <td>
                <div id="divEqpName1">
                    <input id="hdnWODefEqpId1" runat="server" type="hidden" value="7" />
                    <input id="hdnEquipmentId1" runat="server" type="hidden" value="4" />
                    <div id="divEqp1">
                        e2</div>
                    <div id="divEqpImage1">
                        <a id="activiy1" onclick="HideActivities(1)">

                </div>
            </td>
            <td>
                <div id="divEqpHierarchy1">
                    Equipment--&gt;e2</div>
            </td>
            <td>
                <div id="divEqpRemarks1">
                    Remarks</div>
            </td>
            <td>
                <div>
                    </div>
            </td>
            <td>
                <div>
                    $0.00</div>
            </td>
        </tr>
        <tr id="tActMaster1" class="trInnerChildItem" jquery1275984958765="3">
            <td>
            </td>
            <td colspan="5">
                <div id="divActivitiesdetails1">
                    <div id="divActivityMaster">
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        <a onclick="ActivityPopUp(0,1)">
                                        </a></th>
                                    <th>
                                        Activity</th>
                                    <th>
                                        Description</th>
                                    <th>
                                        Duration</th>

                                </tr>
                            </thead>
                            <tbody id="tbActivity">
                                <tr id="trActivity1_1" class="trChildItem" ondblclick="ActivityPopUp(3,1)" 
                                    onmouseleave="HideActEditDiv('1_1')" onmouseover="ShowActEditDiv('1_1',7,1)">
                                    <td>
                                        <div id="divActEdit1_1">
                                        </div>
                                    </td>
                                    <td>
                                        <input id="hdnDefActivityId1_1" runat="server" type="hidden" value="33333" />
                                        <div id="divActivityName1_1">
                                            Act1</div>
                                    </td>
                                    <td>
                                        <div id="divActivityDesc1_1">
                                            Ac1</div>
                                    </td>
                                    <td>
                                        <div id="divActivityDuration1_1">
                                            1&nbsp;Day</div>
                                    </td>

                                </tr>
                                <tr id="trActivity1_2" class="trChildItem" ondblclick="ActivityPopUp(3,1)" 
                                    onmouseleave="HideActEditDiv('1_2')" onmouseover="ShowActEditDiv('1_2',7,1)">
                                    <td>
                                        <div id="divActEdit1_2">
                                        </div>
                                    </td>
                                    <td>
                                        <input id="hdnDefActivityId1_2" runat="server" type="hidden" value="4" />
                                        <div id="divActivityName1_2">
                                            Act2</div>
                                    </td>
                                    <td>
                                        <div id="divActivityDesc1_2">
                                            Act2Desc</div>
                                    </td>
                                    <td>
                                        <div id="divActivityDuration1_2">
                                            1&nbsp;Day</div>
                                    </td>                                               
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>                

    </tbody>
</table>

Answer 1

The code below will clone last row and add after last row in table:

var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();

$trLast.after($trNew);

Working example : http://jsfiddle.net/kQpfE/2/

Answer 2

Little lazy way:

$('#table tbody tr:last').clone().insertAfter('#table tbody tr:last');

Answer 3

I think jQuery.append is what you need: http://api.jquery.com/append/
There is an example showing how to select an element on the page and insert it into another at the end.