Алексей

не innerHTML

document.getElementById("hex").innerHTML = theInput.value;

a value

document.getElementById("hex").value = theInput.value;

поскольку там input

<select id="event"></select>
<select id="dates"></select>

const events = [
  { name: '...', dates: [ ... ] },
  { name: '...', dates: [ ... ] },
  ...
];

const eventEl = document.querySelector('#event');
const datesEl = document.querySelector('#dates');

eventEl.innerHTML = events
  .map((n, i) => `<option value="${i}">${n.name}</option>`)
  .join('');

eventEl.addEventListener('change', function() {
  datesEl.innerHTML = events[this.value].dates
    .map(n => `<option>${n}</option>`)
    .join('');
});

eventEl.dispatchEvent(new Event('change'));

https://datatables.net/reference/option/language.search

series: {
  0: {
    color: 'red',
  },
},

что именно не смог решить через z-index?
задаешь своей менюшке (.blockstart-header__nav-bar) большой z-index и проблемы нет