How to dispaly display() without deleting the other HTML

Question

var students = [
  ["test", "test", "test"],
  ["test", "test", "test"]
];
students.sort();

function display() {

  for (i = 1; i < students.length + 1; i++) {
    document.write("<tr>");
    document.write("<td>" + (i) + "</td>");
    document.write("<td>" + students[i - 1][0] + "</td>");
    document.write("<td>" + students[i - 1][1] + "</td>");
    document.write("<td>" + students[i - 1][2] + "</td>");
    document.write("<td><input type='number' class='form-control' id='quiz" + i + "' ></td>");
    document.write("<td><input type='number' class='form-control' id='reqt" + i + "'></td>");
    document.write("<td><input type='number' class='form-control' id='exam" + i + "'></td>");
    document.write("<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>");
    document.write("</tr>");
  }
}

function AddData() {
  var AddName;
  var AddCourse;
  var AddBDay;
  var Data;

  AddName = document.getElementById('Addname').value;
  AddCourse = document.getElementById('AddCourse').value;
  AddBDay = document.getElementById('AddBDay').value;

  if (AddName != "" && AddCourse != "" && AddBDay != "") {
    Data = [AddName, AddCourse, AddBDay];
    students.push(Data);
    console.log(students);

    display();

  } else {
    alert("Invalid Input");
  }

}

Answer 1

You haven't posted any HTML, but assuming you have a <table id="x"> or <tbody id="x">, modify the display function as below:

function display() {

  let html = '';
  students.map((item, i) => {
    html += "<tr>";
    html += "<td>" + (i+1) + "</td>";
    html += "<td>" + item[0] + "</td>";
    html += "<td>" + item[1] + "</td>";
    html += "<td>" + item[2] + "</td>";
    html += "<td><input type='number' class='form-control' id='quiz" + i + "' ></td>";
    html += "<td><input type='number' class='form-control' id='reqt" + i + "'></td>";
    html += "<td><input type='number' class='form-control' id='exam" + i + "'></td>";
    html += "<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>";
    html += "</tr>";
  });  
  document.getElementById("x").innerHTML = html;
}

Also, document.write is rarely to never used. More here.
element.innerHTML is generally used when you want to perform some DOM manipulation as a result of an API call or any other event, as in your case.

Answer 2

document.write is very very old-school and it's very rarely used any more for many reasons.

You can either create a string variable that you can then add (concatenate) new strings to, or you can use more modern methods like in the example below which uses map to iterate over the array to create a new array of strings, and then join that array up into one HTML string.

const students = [
  ["test", "test", "test"],
  ["test", "test", "test"]
];

function getHtml(students) {
  return students.map(arr => {
    return `
      <tr>
        <td>${arr[0]}</td>
        <td>${arr[1]}</td>
        <td>${arr[2]}</td>
      </tr>
    `
  }).join('');
}

const table = document.querySelector('table');
table.innerHTML = getHtml(students);

<table></table>