Dropdown options displaying outside it and not selectable

I have a dropdown menu with set up exactly like other dropdown menu’s. This drop down menu however, displays its options underneath it and does not allow me to select an item.

Also, when I add options to it using JavaScript, only those options are displayed correctly and are selectable.

HTML code:

<div id="itemRemover" class="dropdown-wrapper" style="display: none;">
  <span class="label">Select item to be removed:</span>
  <select id="-removelist-" class="dropdown">
    <option value="" disabled selected></option>
  </select>
  <button id="btnRemove" class="button" style="margin-top: 5px;">Remove</button>
</div>

JavaScript code used to add options to the dropdown:

//Create new option
const option = document.createElement('option');
option.textContent = item;
// Add option to the list
document.getElementById('itemRemoverMenu').appendChild(option);

Image of the problem:
enter image description here

I tried using overflow: visible on the parent and I tried making the other elements on the page smaller as I thought the page getting too populated was the issue.