JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form name="teacher" method="post" action="teacher.php">
        <table>
            <tr id="name">
                <td>
                    <label for="first_name">First Name</label>
                </td>
                <td>
                    <input type="text" name="first_name">
                </td>
                <td>
                    <label for="last_name">Last Name</label>
                </td>
                <td>
                    <input type="text" name="last_name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="course1">Course 1</label>
                </td>
                <td>
                    <input type="text" name="course1">
                </td>
                <td>
                    <label for="course2">Course 2</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
            </tr>
            <tr id="courses1" style="display:none;" >
                <td>
                    <label for="course3">Course 3</label>
                </td>
                <td>
                    <input type="text" name="course2">
                </td>
                <td>
                    <label for="course4">Course 4</label>
                </td>
                <td>
                    <input type="text" name="course4">
                </td>
            </tr>
            <tr id="courses2" style="display:none;" >
                <td>
                    <label for="course5">Course 5</label>
                </td>
                <td>
                    <input type="text" name="course5">
                </td>
                <td>
                    <label for="course6">Course 6</label>
                </td>
                <td>
                    <input type="text" name="course6">
                </td>
            </tr>
            <tr id="courses3" style="display:none;">
                <td>
          ...

CSS

table, th, td{
    margin: 0;
    font: 16px helvetica, sans-serif;
    border: 1px solid black;
}

JavaScript

function display(){
    for (var i = 1; i < 8; i++){
        var id = "courses" + i.toString();
        if (document.getElementById(id).style.display == "none"){
            var elem = document.getElementById(id);
            elem.style.display = "tr";
            break;
        }
    }
    
}