How to dynamically add form values to a new row in an HTML table?

I’m trying to dynamically add the values from a form into an HTML table. Each time the user submits the form, the values should be added as a new row in the table. However, I’m unsure how to append the new values to a new row and ensure that subsequent form submissions go to the next row.

Here’s the structure of my HTML form:

<form id="schedule-form">
  <label for="Name">Name:</label>
  <input type="text" name="Name" id="name">
  
  <label for="program">Course:</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">Subject:</label>
  <select id="subjects"></select>
  
  <label for="room">Room:</label>
  <select id="room">
    <option value="IT Room 1">IT Room 1</option>
    <option value="IT Lab 1">IT Lab 1</option>
    <option value="IT Lab 2">IT Lab 2</option>
    <option value="IT Lab 3">IT Lab 3</option>
  </select>
  
  <label for="day">Day:</label>
  <select id="day">
    <option value="MWF">MWF</option>
    <option value="TTH">TTH</option>
    <option value="Mon">Mon</option>
    <option value="Tue">Tue</option>
    <option value="Wed">Wed</option>
    <option value="Thu">Thu</option>
    <option value="Fri">Fri</option>
  </select>
  
  <label for="start-time">Start Time:</label>
  <input type="time" id="start-time">
  
  <label for="end-time">End Time:</label>
  <input type="time" id="end-time">
  
  <button type="submit">Schedule</button>
</form>

And here’s the table where I want to display the scheduled classes:

<h3>Scheduled Classes</h3>
<table>
  <thead>
    <th>Name</th>
    <th>Course</th>
    <th>Subject</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody id="schedule-table">
    
  </tbody>
</table>

Here’s my current JavaScript (which is not working):

document.getElementById('schedule-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Get form values
  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;

  // I need help figuring out how to append these values to a new table row
  // and ensure that multiple submissions add to the next row

});