// 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>