Сергей Соколов

Достаточно заменять не на единственный новый селект, а на его клон:

- el.parentNode.replaceChild(customSelect, el);
+ el.parentNode.replaceChild(customSelect.cloneNode(true), el);

Когда элементы создаются-добавляются динамически, удобно использовать делегирование событий:
слушать клики не на самих чекбоксах, а выше, на общем родителе, на этом settParent.

Тогда не нужно вешать слушателя на каждый новый чекбокс.

settParent.addEventListener('input', ({ target }) => console.log(target.value));

export default str => {
  const validLetters = (625442493).toString(36);
  const emptyString = [] + [];

  return str
    .split(emptyString)
    .map(c => (validLetters.includes(c) ? c.charCodeAt(0) - 61 : Number(c).toString() === c ? c : emptyString))
    .join(emptyString);
};

Из формы менять данные в массиве. И заново отрисовывать массив.
Vue/React оптимизируют этот момент и перерисовывают только изменения.
Клик можно ловить выше по дереву 1 раз. Так проще будет добавлять новые «статьи» без необходимости вешать на каждую слушатели клика.

Удобно использовать Object.assign() — метод копирует все перечисляемые свойства в целевой объект:

const target = { a: '', b: 'V'}; // скопируем сюда
const source = { a: 'AAA', c: 'CCC' }; // отсюда
Object.assign(target, source);
target // { a: "AAA", b: "V", c: "CCC" }

Если не беда, что опустошатся participants, то можно так:

hotel.forEach(({ room }) => room.forEach(slot => Object.assign(slot, participants.pop())));

Ну или так, с нетронутыми participants.

let i = 0;
hotel.forEach(({ room }) =>
  room.forEach((slot) => Object.assign(slot, participants[i++]))
);

Можно посмотреть childNodes этого параграфа. Их будет три: текст, элемент, текст.
Заменить последний на его клон в обёртке:

Там же линейная интерполяция:
value = 1000 + 135 * (15000 - 1000) / 180 = 11500

Но это не учитывает сокращение диапазона пикселей из-за толщины «рукоятки» слайдера — а это уже зависит от стилей, платформы, браузера, положения Венеры в Марсе.

Так выглядит range slider в крайнем правом положении в Mozilla Firefox 106 под Mac Os X:
ширина 150px в масштабе 170%. Сверху точно той же ширины div с тёмной заливкой. CodePen.

Слайдер почему-то смещен на неск. пикселей правее div'а, но длина точно такая же.
Кнопка ездит, не вылезая за края диапазона. Значит, фактический диапазон пикселей меньше, чем сам слайдер.

у поля ввода атрибут pattern должен быть: pattern="\+49[0-9]{10,11}"

В валидации в showError() надо проверять свойство patternMismatch:

} else if (phone.validity.patternMismatch) {
  phoneError.textContent = 'phone should be +49 followed by 10 to 11 digits';
}

Можно изнутри наружу идти:
создавать очередной элемент и вкладывать в него предыдущий.

Массивы с пустыми слотами называются sparse arrays. Разные методы массивов по-разному обходятся с пустыми слотами: более новые их считают undefined, старые методы пропускают.

Топорное решение: собрать индексы присутствующих элементов, и сравнить с полным диапазоном индексов:

const arr = [1,2,3,4,5,6,7,8,9];
delete arr[1];
delete arr[3];
delete arr[5];
// arr == [ 1, <1 empty slot>, 3, <1 empty slot>, 5, <1 empty slot>, 7, 8, 9 ]

const present = [];
arr.forEach((_, i) => present.push(i));
// present == [ 0, 2, 4, 6, 7, 8 ]

const empty = Array.from({ length: arr.length }, (_, i) => i) // [0,1,2,3,4,5,6,7,8]
  .filter(i => !present.includes(i));
// empty == [ 1, 3, 5 ]

Предложил бы редуцировать измерения )
свести двумерное поле к одномерной колбасе.

Если поле 6x6, то это одномерный массив длиной 36 элементов. Каждый элемент — одна из клеток на поле.
Номер элемента однозначно переводится в координаты (x, y), если известна длина стороны поля.

Например, поле 6x6. Нумерация от нуля: 0..5 Число, допустим, 13.

X = 13 % 6 = 1 
Y = floor(13 / 6) = 2

Теперь, из колбасы всех возможностей надо отобрать случайным образом сколько требуется случайных.

В цикле брать один случайный элемент из оставшихся в колбасе. Причём забирать, вынимать его оттуда, сокращая массив оставшихся возможностей.

Так не понадобится холостых повторных попаданий в ранее выбранные клетки. Не понадобится по два случайных генерить. Один рандом — одно 100% попадание.

function generator(quantity, side = 6) {
  const length = side * side;
  if (quantity > length) throw new Error('too much u ask');

  const options = Array.from({ length }, (_, i) => i); // [0,1,2,3, .. ,35]
  const nToPoint = n => ({ x: n % side, y: Math.floor(n / side) }); // 13 => {x:1, y:2}
  return Array.from({ length: quantity }, () =>
    nToPoint(
      options.splice(Math.floor(Math.random() * options.length), 1).pop()
    )
  );
}

console.log(generator(4));
// [{x:1,y:2}, {x:0,y:4}, {x:1,y:0}, {x:4,y:4}]

Нумеровать поля можно парами (x, y), а можно сквозной нумерацией 0..8 как div'ы в контейнере.
Понадобится перевод из одной системы в другую, и назад.

Текущее состояние можно держать как сквозной номер активного дива.
Стрелочки меняют (x, y) координаты.
Не забыть перевести туда-сюда и отрисовать – удаляя/добавляя класс, в зависимости от номера дива.