Заполнить представление разными значениями в js

Я пишу сайт и мне нужно работать с большими массивами данных. Я сортирую это с помощью специальной алгоритмики, и теперь я хочу заполнить одну целую таблицу, но ввести разные значения.

У меня уже есть этот фрагмент HTML:

<div class='main_has_permission' id = "main_has_permission">
            <div class='main_padding' id = "main_padding">

              <div class = "noten_tabelle_permission" id = "noten_tabelle_permission">
                <h1 id = "member_name"></h1>
                <table id = "grades_table" style = "width:100%">
                  <tr>
                    <th>Fach</th>
                    <th>mündlich</th>
                    <th>Klausur</th>
                  </tr>
                </table>
              </div>
            </div>
          </div>   

Div main_padding - это div, в который должна быть заполнена вся таблица.

С помощью следующего кода я получаю данные и вызываю функцию для добавления значений в таблицу:

db.collection("users")
  .doc(el)
  .collection("grades")
  .get()
  .then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
      const data = doc.data();
      addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
    });
  });

Наконец, вот функция, которая добавляет значения в таблицу:

function addToTable(table_name, subject, mdl, klu) {

  var subject_name = getSubjectByNumber(subject);
  var short_subject = getSubjectShortByNumber(subject);

      //Zeile erstellen

      var y = document.createElement([short_subject]);
      y.setAttribute("id", [short_subject]);
      document.getElementById([table_name]).appendChild(y);

      //Spalten in einer Zeile

      var y = document.createElement("TR");
      y.setAttribute("id", [short_subject]);

      //Spalten in einer Zeile

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById("grades_table").appendChild(y);
}

Теперь ... Как заполнить таблицу, введя разные значения? Заранее спасибо.