// As the Ajax call is not the issue here, simulate some sample data const data = [ { id:1, numar: "a IV-a A", profesor: 23, elevi: "Matel Marian", media: "8.32"}, { id:2, numar: "a VI-a C", profesor: 26, elevi: "Cornel Ababei", media: "7.96"}, { id:3, numar: "ss", profesor: "sss", elevi: "sss", media: "sss"}, ]; // The <table>, <thead>, and <tbody> tags are needed just once let output = `<table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Clasa</th> <th scope="col">Numar Elevi</th> <th scope="col">Profesor</th> <th scope="col">Media Notelor</th> </tr> </thead> <tbody id="tbody">`; // Then for each item, append a <tr>...</tr> element data.forEach((product) => { output += ` <tr> <th scope="row">${product.id}</th> <td>${product.numar}</td> <td>${product.profesor}</td> <td>${product.elevi}</td> <td>${product.media}</td> </tr>`; }); // Finally, close off with </table> output += "</tbody></table>"; document.getElementById("table").innerHTML = output; // Say later you have another Ajax call and got another item. const add = () => { // simulated data: const newItem = I = { id:4, numar: "b IX-c D", profesor: 88, elevi: "Richard Feyman", media: "9.99"}; let row = document.createElement("tr"); row.innerHTML = `<td>${I.id}</td><td>${I.numar}</td><td>${I.profesor}</td><td>${I.elevi}</td><td>${I.media}</td>`; const tbody = document.getElementById("tbody"); tbody.appendChild(row); }

 .table, .table td, .table th { border: solid 1px black }

 <div id="table"></div> <p> <button onclick="add()">Add another row</button> </p>