Having trouble adding rows in JavaScript. The code is functioning correctly, but the new rows are appearing after the tbody tag instead of inside it.
Here's a snippet of the code:
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('add-row').deleteRow(i);
}
function insRow() {
var x = document.getElementById('add-row');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
x.appendChild(new_row);
}<table class="table table-hover" id="add-row">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th style="text-align:right;">Delete</th>
</tr>
</thead>
<tbody id="add-row1">
<tr>
<td>1</td>
<td>
<input type="text" class="form-control input-sm" placeholder="Enter Group Name" id="group" />
</td>
<td class="pull-right">
<button class="btn btn-sm btn-danger" id="delPOIbutton" onclick="deleteRow(this)"><i class="fa fa-close"></i> Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<button class="btn btn-sm btn-success pull-right"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-sm btn-primary" id="addmorePOIbutton" onclick="insRow()"> <i class="fa fa-plus"></i> Add</button>
</td>
</tr>
</tfoot>
</table>