document.addEventListener("DOMContentLoaded", function() {
// Get the dropdown field for selecting the number of students
const studentNumberField = document.querySelector("[name='Number of Students']");
// Collect all the student field containers
const studentFields = [];
for (let i = 1; i <= 10; i++) {
studentFields.push(document.querySelector(`#student${i}-fields`));
}
// Initially hide all additional student fields
studentFields.forEach(field => field.style.display = "none");
// Listen for changes in the number of students selected
studentNumberField.addEventListener("change", function() {
// Get the selected number of students
const numberOfStudents = parseInt(studentNumberField.value, 10);
// Hide all student field sections initially
studentFields.forEach(field => field.style.display = "none");
// Show only the fields needed based on the selected number
for (let i = 0; i < numberOfStudents; i++) {
studentFields[i].style.display = "block";
}
});
});
