title: Best way to populate table from multiple MySQL database tables
body: <p>I'm building a student score viewing table using MySQL in the backend. So far, I have two tables for this feature. <code>activities</code> contains the class code it belongs into, it's own unique activity code, a name, the max score of the activity, and when it was added as a UNIX timestamp. <code>outputs</code> refers to students' outputs per activity, containing the activity code, the student code, and the score.</p>
  
  <pre><code>TABLE activities
  
  +----+------------+---------------+---------------+-----------+------------+
  | id | class_code | activity_code | activity_name | max_score | time_added |
  +----+------------+---------------+---------------+-----------+------------+
  |  1 |    Pq5H    |      xJDM     |   Seatwork 1  |     10    | 1578632389 | 
  +----+------------+---------------+---------------+-----------+------------+
  |  2 |    Pq5H    |      JXrA     |   Seatowrk 2  |     15    | 1578952035 |
  +----+------------+---------------+---------------+-----------+------------+
  |  3 |    JXrA    |      b5Ud     |   Seatwork 1  |     10    | 1578975406 |
  +----+------------+---------------+---------------+-----------+------------+
  
  TABLE outputs
  outputs.activity_code references activities.activity_code
  
  +----+---------------+--------------+-------+
  | id | activity_code | student_code | score |
  +----+---------------+--------------+-------+
  |  1 |      xJDM     |     FAb1     |   10  |
  +----+---------------+--------------+-------+
  |  2 |      JXrA     |     FAb1     |   14  |
  +----+---------------+--------------+-------+
  |  3 |      xJDM     |     jIPA     |   8   |
  +----+---------------+--------------+-------+
  |  4 |      JXrA     |     jIPA     |   12  |
  +----+---------------+--------------+-------+
  |  5 |      Pq5H     |     FAb1     |   9   |
  +----+---------------+--------------+-------+
  |  6 |      Pq5H     |     jIPA     |   7   |
  +----+---------------+--------------+-------+
  </code></pre>
  
  <p>On the frontend, I also have an editable table where users edit the score like so:</p>
  
  <pre><code>FOR CLASS Pq5H
  +---------+------------+------------+
  | Student | Seatwork 1 | Seatwork 2 |
  +---------+------------+------------+
  |   FAb1  |     10     |     14     |
  +---------+------------+------------+
  |   jIPA  |      8     |     12     |
  +---------+------------+------------+
  </code></pre>
  
  <p>In short, the column headers contain the activities for a specific class, the first row contains the students in that class, and the cells are the scores of the students in the corresponding columns.</p>
  
  <p>The users would also be able to dynamically add columns which creates new activities, and when they save, the new scores would be added to the outputs table.</p>
  
  <p>What would be the best way to go around (1) populating the HTML table and (2) saving output data from new HTML columns into the database? So far, all I found regarding this are populating HTML table rows with rows directly lifted from the database, which is not what I need in this case.</p>
  
  <p>I'm using HTML, JS (with jQuery), PHP, and MySQL.</p>