In HTML & Javascript:

I have 2 dropdown menus that I am dynamically populating from information from an external javascript file. One dropdown depends on the "onchange" of another dropdown. The first dropdown has names of people and the second dropdown has info about people they put in aka categories. For each people, the categories change but I can't hardcode it. I have the items displaying correctly in both dropdowns but I made it so that a function for the second dropdown is called like this:

dropdown.addEventListener("change", peopleBasicInfo);

then this peopleBasicInfo will trigger the info in the second dropdown to change. To add the options to the second dropdown I used appendChild() and so every on change the items are added BUT I want them to reset every time the first dropdown changes not have them all added. How would I achieve this?