JSFiddle - React, Tailwind, and code Playground

HTML

<label>Select Position</label>
<select id="thechoices" name="position">
    <option value="stud">Student</option>
    <option value="fac">Faculty Member</option>
</select>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
<label>ID Number</label>
<input type="text" name="id_num" size="8" maxlength="8" pattern="\d" placeholder="8-digits only" required />
<label>Course</label>
<input type="text" name="course" id="studcourse" placeholder="Course" required/>
<label>Level</label>
<input type="text" name="year" id="studlevel" placeholder="Level" required/>

JavaScript

$(document).ready(function () {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    var studentcourse = $("#studcourse");
    var studentlevel = $("#studlevel");
    //var sub = $('#submithere');

    if (the_position == 'stud') {

        //alert('true');
        studentcourse.show();
        studentlevel.show();
        studentcourse.attr("required", "required");
        studentlevel.attr("required", "required");

    }
    if (the_position == 'fac') {

        //alert('false');
        studentcourse.hide();
        studentlevel.hide();
        studentcourse.removeAttr("required");
        studentlevel.removeAttr("required");


    }
}