Estoy tratando de agregar una copia de un elemento al final del elemento principal. Parece agregar todo lo que está por encima del último elemento dentro del padre. Ejemplo en vivo en JSFiddle
var count = 1; $("#addBtn").click(function(){ $('#trid1').clone().appendTo('table#exampleTable > tbody'); count++; $('#trid1').last().prop('id', 'trid'+count); $('#trid'+count+' > th').html(count); }); <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="exampleTable"> <thead> <tr> <th scope="col">c1</th> </tr> </thead> <tbody> <tr id="trid1" class="trclass"> <th scope="row">1</th> </tr> </tbody> </table> <button type="button" id="addBtn">Add</button>Cambiaría la identificación antes de agregar el nuevo elemento al DOM.
De todos modos, refactoricé ligeramente su código con esa estrategia en mente y traté mejor con el índice actual cada vez que hace clic en el botón Agregar. El índice más reciente se guarda en un atributo de datos en la tabla.
$("#addBtn").click(function(){ const latestIndex = $('#exampleTable').data('latest-index'); let i = latestIndex+1; const newRow = $('#trid1').clone(); newRow.prop('id', `trid${i}`); newRow.data('index', i); newRow.text(i); newRow.appendTo('table#exampleTable > tbody'); $('#exampleTable').data('latest-index', i); }); button{ cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="exampleTable" data-latest-index="1"> <thead> <tr> <th scope="col">Rows</th> </tr> </thead> <tbody> <tr id="trid1" class="trclass"> <th scope="row">1</th> </tr> </tbody> </table> <button type="button" id="addBtn">Add</button>