Проблемы с клонированием элементов
 

Есть страница, на которой выводятся табличные данные - скажем: Название1, Название2, Название3. Придумал простенький код, который к этим названиям (поле input) подтягивает поле select с выбором значений для замены в input. Все нормально, когда input один. Как только появляется второй (дальше еще даже не заглядывал) - у второго начинаются проблемы с заполнением поля input и с закрытием select по focusout. При этом первый элемент работает как ни в чем не бывало!
Прикрепляю скрипт, который я сваял:

function update(e, targetId) {
  let target = document.getElementById('bdf['+targetId+']');
  let target2 = document.getElementById('code['+targetId+']');
  let target3 = document.getElementById('sif['+targetId+']')
  let ob = e.options[e.selectedIndex];
  target.value = `${ob.value} - ${ob.text}`;
  target2.value = `${ob.value}`;
  target3.style='display:none'; 
  } 

let elements = document.querySelectorAll('select');
for (const dropdown of elements) {  

dropdown.addEventListener('mouseout', (event) => {
  if (!dropdown.contains(event.relatedTarget)) {
    dropdown.style='display:none';
  }
}, true);
}

Не знаю: как удалить, но нашел ошибку - были ошибки в id - яваскрипт ведь регистрозависимый. Поправил - работает! Так, что, если кому-то нужна реализация из нескольких строчек - вот она