Adding multiple dropdowns using appendChild() not working as expected

I'm using vanilla JS.<br><br>I'm making a dropdown using `appendChild()` which works fine for one dropdown but when I make multiple dropdowns, one dropdown's `appendChild()` function is also adding the dropdown options to the other dropdown.<br><br>Why is this happening and how do I solve this?<br><br>Here's my code. <br><br>```javascript<br>function addDropdown(testId, options, index, dropdownId, dropdownName) {<br> const dropdowns = document.getElementById(`dropdowns-${testId}`);<br> const dropdown = document.createElement('div');<br> dropdown.id = dropdownId;<br> dropdown.className = 'dropdown dropdown--active';<br><br> const dropdownSwitch = document.createElement('div');<br> dropdownSwitch.className = 'dropdown__switch';<br><br> const dropdownMenu = document.createElement('div');<br> dropdownMenu.className = 'nav__dropdown-menu';<br><br> const dropdownListHeader = document.createElement('div');<br> dropdownListHeader.className = 'nav__dropdown-menu__header';<br><br> const dropdownLabel = document.createElement('label');<br> dropdownLabel.textContent = dropdownName;<br> dropdownLabel.htmlFor = `select-${testId}`;<br><br> const dropdownSelect = document.createElement('select');<br> dropdownSelect.id = `select-${testId}`;<br> dropdownSelect.dataset.dropdown = 'true';<br><br> const dropdownMenuList = document.createElement('ul');<br> <br> let dropdownMenuListItems = [];<br> options.forEach((option) => {<br> const dropdownMenuItem = document.createElement('li');<br> const dropdownMenuLink = document.createElement('a');<br> dropdownMenuLink.href = '#';<br> dropdownMenuLink.textContent = option.name;<br> dropdownMenuLink.dataset.optionId = option.id;<br> dropdownMenuLink.dataset.optionName = option.name;<br> dropdownMenuLink.dataset.optionValue = option.value;<br><br> dropdownMenuListItems.push(dropdownMenuLink);<br> dropdownMenuItem.appendChild(dropdownMenuLink);<br> dropdownMenuList.appendChild(dropdownMenuItem);<br> });<br><br> dropdownMenuListItems.forEach((item) => {<br> dropdownMenu.appendChild(item);<br> });<br><br> dropdowns.appendChild(dropdown);<br> dropdown.appendChild(dropdownSwitch);<br> dropdown.appendChild(dropdownMenu);<br> dropdownMenu.appendChild(dropdownListHeader);<br> dropdownMenu.appendChild(dropdownSelect);<br> dropdownListHeader.appendChild(dropdownLabel);<br> dropdownSwitch.appendChild(dropdownSelect);<br> dropdownMenu.appendChild(dropdownMenuList);<br><br> }<br>```<br><br>It's the last foreach loop where I'm appending all the menu options. If I move this bit of code inside the first foreach loop, it works fine.<br><br>```javascript<br>dropdownMenuListItems.forEach((item) => {<br> dropdownMenu.appendChild(item);<br>});<br>```<br><br>I'm guessing this is because the foreach loop is still available for the "previous" dropdown, but I don't understand why.