Как динамически добавлять значения формы в новую строку HTML-таблицы?

Question 1

Я пытаюсь динамически добавить значения из формы в HTML-таблицу. Каждый раз, когда пользователь отправляет форму, значения должны добавляться как новая строка в таблице. Однако я не знаю, как добавить новые значения в новую строку и убедиться, что последующие отправки формы добавляются в следующую строку.

Вот структура моей HTML-формы:

<form id="schedule-form">
  <label for="Name">Имя:</label>
  <input type="text" name="Name" id="name">

  <label for="program">Курс:</label>
  <select id="program">
    <option value="BSIT">BSIT</option>
    <option value="BSHM">BSHM</option>
    <option value="BSCRIM">BSCRIM</option>
    <option value="BSED">BSED</option>
    <option value="BEED">BEED</option>
  </select>

  <label for="subjects">Предмет:</label>
  <select id="subjects"></select>

  <label for="room">Аудитория:</label>
  <select id="room">
    <option value="IT Room 1">IT-комната 1</option>
    <option value="IT Lab 1">IT-лаборатория 1</option>
    <option value="IT Lab 2">IT-лаборатория 2</option>
    <option value="IT Lab 3">IT-лаборатория 3</option>
  </select>

  <label for="day">День:</label>
  <select id="day">
    <option value="MWF">Пн, Ср, Пт</option>
    <option value="TTH">Вт, Чт</option>
    <option value="Mon">Пн</option>
    <option value="Tue">Вт</option>
    <option value="Wed">Ср</option>
    <option value="Thu">Чт</option>
    <option value="Fri">Пт</option>
  </select>

  <label for="start-time">Время начала:</label>
  <input type="time" id="start-time">

  <label for="end-time">Время окончания:</label>
  <input type="time" id="end-time">

  <button type="submit">Запланировать</button>
</form>

А вот таблица, в которую я хочу отображать запланированные занятия:

<h3>Запланированные занятия</h3>
<table>
  <thead>
    <th>Имя</th>
    <th>Курс</th>
    <th>Предмет</th>
    <th>Аудитория</th>
    <th>День</th>
    <th>Время</th>
  </thead>
  <tbody id="schedule-table">

  </tbody>
</table>

Вот мой текущий JavaScript (который не работает):

document.getElementById('schedule-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // Получаем значения формы
  let name = document.querySelector('[name="Name"]').value;
  let course = document.getElementById('program').value;
  let subject = document.getElementById('subjects').value;
  let room = document.getElementById('room').value;
  let day = document.getElementById('day').value;
  let startTime = document.getElementById('start-time').value;
  let endTime = document.getElementById('end-time').value;

  // Мне нужно помочь понять, как добавить эти значения в новую строку таблицы
  // и убедиться, что несколько отправок добавляются в следующую строку

});

Question 2

Лучше создать объект с данными, а затем написать простую функцию, которая использует createElement и добавляет его в нужную таблицу.

Создайте объект со значениями из формы. Поскольку у вас есть только один столбец для времени, я добавил строку для времени, которая принимает время начала и окончания.
Напишите функцию (function addSchedule(Object) { ... }) и вызовите эту функцию (addSchedule(Object)), передав объект в качестве параметра.
Создайте константу, которая будет использоваться для создания нового элемента: const Element = document.createElement('tr')
Итерация по объекту с помощью цикла for. Посмотрите документацию MDN WebDocs.
Так же, как и на шаге 3, создайте элемент для нового td, который временно сохраняется внутри константы.
Включите значение, используя Element.textContent = value
Добавьте TD к TR с помощью TR.appendChild(TD)
Так же, как и на шаге 7, добавьте TR к tbody

document.getElementById('schedule-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // Получаем значения формы
  const DataSet = {
    name: document.querySelector('[name="Name"]').value,
    course: document.getElementById('program').value,
    subject: document.getElementById('subjects').value,
    room: document.getElementById('room').value,
    day: document.getElementById('day').value,
    time: `${document.getElementById('start-time').value} - ${document.getElementById('end-time').value}`
  }

  addSchedule(DataSet);
});

function addSchedule(DataSet) {
  const newTR = document.createElement('tr');

  for (const [key, value] of Object.entries(DataSet)) {
    const newTD = document.createElement('td');
    newTD.textContent = value;
    newTR.appendChild(newTD);
  }

  document.getElementById('schedule-table').appendChild(newTR);
}

<form id="schedule-form">
  <label for="Name">Имя:</label>
  <input type="text" name="Name" id="name">

  <label for="program">Курс:</label>
  <select id="program">
    <option value="BSIT">BSIT</option>
    <option value="BSHM">BSHM</option>
    <option value="BSCRIM">BSCRIM</option>
    <option value="BSED">BSED</option>
    <option value="BEED">BEED</option>
  </select>

  <label for="subjects">Предмет:</label>
  <select id="subjects"></select>

  <label for="room">Аудитория:</label>
  <select id="room">
    <option value="IT Room 1">IT-комната 1</option>
    <option value="IT Lab 1">IT-лаборатория 1</option>
    <option value="IT Lab 2">IT-лаборатория 2</option>
    <option value="IT Lab 3">IT-лаборатория 3</option>
  </select>

  <label for="day">День:</label>
  <select id="day">
    <option value="MWF">Пн, Ср, Пт</option>
    <option value="TTH">Вт, Чт</option>
    <option value="Mon">Пн</option>
    <option value="Tue">Вт</option>
    <option value="Wed">Ср</option>
    <option value="Thu">Чт</option>
    <option value="Fri">Пт</option>
  </select>

  <label for="start-time">Время начала:</label>
  <input type="time" id="start-time">

  <label for="end-time">Время окончания:</label>
  <input type="time" id="end-time">

  <button type="submit">Запланировать</button>
</form>

<h3>Запланированные занятия</h3>
<table>
  <thead>
    <th>Имя</th>
    <th>Курс</th>
    <th>Предмет</th>
    <th>Аудитория</th>
    <th>День</th>
    <th>Время</th>
  </thead>
  <tbody id="schedule-table">

  </tbody>
</table>

Question 3

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

Как динамически добавлять значения формы в новую строку HTML-таблицы?

Вопрос или проблема

Ответ или решение

HTML

JavaScript

Объяснение кода