Having a peculiar issue with two dropdowns on my webpage. The first dropdown works perfectly fine, but when I click on the second dropdown, the options don't show up on the webpage, even though they are visible in the element window. Both dropdowns have the same options and are populated from a dynamic array. Strangely, there are no error messages in the console to indicate what might be wrong. Any assistance in resolving this issue would be greatly appreciated.
I've searched for similar questions on this platform but haven't found a relevant solution yet. I even attempted to remove the 'overflow: hidden' property, but that didn't solve the problem either.
arr = ["Honda", "Suzuki", "Hyundai"];
var select = document.getElementById("Drop1");
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value", arr[i]);
select.insertBefore(option, select.lastChild);
}
var select1 = document.getElementById("Drop2");
for (var i = 0; i < arr.length; i++) {
var options = document.createElement("OPTIONS"),
txt = document.createTextNode(arr[i]);
options.appendChild(txt);
options.setAttribute("value", arr[i]);
select1.insertBefore(options, select1.lastChild);
}<div class="col-3">
<select id="Drop1" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple>
<option value="" disabled selected>Car Features</option>
</select>
<label class="mdb-main-label">Car Features</label>
</div>
<div class="col-3">
<select id="Drop2" class="mdb-select md-form colorful-select dropdown-dark mx-2" multiple>
<option value="" disabled selected>Bike Features</option>
</select>
<label class="mdb-main-label">Bike Features</label>
</div>