How to make dynamic table using Javascript?

I am trying to create a dynamic html table and i've not been able to do it yet.

i will give what ive done

and this is the code

<table id="myTable">
    <tr id="tr">
        <th>Students Name</th>
        <th>Average</th>
    </tr>
    {% for student in teacherStudents %}
    <tr id="tr2">
        <td id="td">{{ student.Students_Enrollment_Records.Student_Users }}</td>
    </tr>
    {% endfor %}
</table>
<button type="button" value="" class="save" onclick="doTheInsert()" title="Insert New Cell" id="save">+ Insert New Cell</button>

<button type="button" value="" class="save" onclick="undoTheInsert()" title="Undo Recent Action" id="unsave">× Undo Recent Action</button>

<script>
    var count = 0;

    function doTheInsert() {
        let header = $.find("tr[id='tr']")[0];
        header.append("<th data-id='header'><input type='date'></th>");
        let rows = $.find("tr[id='tr2']");
        for (let i = 0; i < rows.length; i++) {
            rows[i].append("<td data-id='row'><input type='text'/></td>");
        }
    }
</script>

what i want is if the teacher click the button it will add textbox under the date, depending on the number of students how many textboxes to add

for example i click twice the button Insert New Cell

this is the result I want, (i will make static result to clarify what i want)

what result ive got

UPDATE:
when I tried the answer of Sir dirkgroten I got this

the date will appear between the Students Name and Average

Your .append() is applied to a javascript DOM node instead of jQuery element, because you index into the jQuery elements.

For example, let header = $("tr#tr") gives you all <tr id="tr"> elements. When you do header[0] this isn't a jQuery element anymore but the javascript node. So append() is not the same function you expect:

• In javascript, ParentNode.append(<string>) appends the actual string, as explained here.
• In jQuery, elem.append(<string>) appends the HTML, if the string is an htmlString, as explained here.

Your code should be like this:

function doTheInsert()
    {
        let header=$("tr#tr");  // same as $.find("tr[id='tr2']")
        header.append("<th data-id='header'><input type='date'></th>");

        let rows=$("tr#tr2");
        rows.append("<td data-id='row'><input type='text'/></td>");
    }