Advertisements
I’m trying to append a copy of an element to the bottom of the parent element. It seems to append everything above the last element within the parent. Live example on 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>>Solution :
I would change the id before appending the new element to the DOM.
Anyway I slightly refactored your code with that strategy in mind and better dealt with the current index every time you click the add button. The latest index gets saved in a data attribute in the table.
$("#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>