aliasmark

ну так создавайте в цикле новые элементы

const backgroundSection = document.getElementById('bgElem');
for(let i = 0; i < 45; i++) {
    const elem = document.createElement('span');
    backgroundSection.parentNode.appendChild(elem);
}

- if (map && typeof map.setCenter === 'function' && typeof map.setZoom === 'function') {
-     map.setCenter(15)(marker.geometry.getCoordinates(), 15);
-     map.setZoom(15);
- }
+ map.setLocation({
+   center: markersCollection.find(n => n.id === officeId).coordinate,
+   zoom: 15,
+ });

Вы берёте childNodes, куда входят не только элементы, но и текстовые узлы между элементами (переводы строк).

// [object NodeList] (7)
[#text,<div/>,#text,<div/>,#text,<div/>,#text]

Так вот у этих текстовых узлов нет параметра offsetWidth, соответственно вы складываете undefined, получая NaN.

- let box = document.querySelector(".box").childNodes;
+ let box = document.querySelector(".box").children;
- box.forEach((item) => {
+ for (let item of box) {
- })
+ }

Я бы предложила небольшой рефакторинг, чтоб сделать код более читаемым

// объект с путями к изображениям для нормального и hover состояний чтоб не засорять основной код ссылками
// предполагаю, что в сумме у вас их 6, по 2 на каждый элемент motionPlitka
const imageSources = {
  preim1: {
    normal: "https://i.ibb.co/ZdHgXTm/green.png",
    hover: "https://i.ibb.co/g6mNxm8/white.png"
  },
  preim2: {
    normal: "https://i.postimg.cc/6pKDm5Lq/green2.png",
    hover: "https://i.postimg.cc/2SPBDMy1/white2.png"
  },
  preim3: {
    normal: "https://ltdfoto.ru/images/2024/06/13/green3.png",
    hover: "https://ltdfoto.ru/images/2024/06/13/white3.png"
  }
};

// выносим функцию изменения картинки в зависимости от состояния (normal или hover)
const setImageSrc = (element, state) => {
  // находим элемент <img> внутри элемента motionPlitka, на котором у нас курсор
  const img = element.querySelector("img"); 

  // извлекаем список классов элемента и ищем класс, который есть в imageSources
  // в вашем случае preim1, preim2 или preim3
  const className = [...element.classList].find(cls => imageSources[cls]); 

  // меняем src элемента <img> на значение из объекта imageSources для нужного класса и состояния
  img.src = imageSources[className][state];
};

// получаем все элементы .motionPlitka и добавляем обработчики
document.querySelectorAll(".motionPlitka").forEach(elem => {
  // при наведении мыши вызываем setImageSrc с состоянием hover
  elem.addEventListener('mouseenter', () => setImageSrc(elem, 'hover'));
  // при уходе мыши вызываем setImageSrc с состоянием normal
  elem.addEventListener('mouseleave', () => setImageSrc(elem, 'normal'));
});

Здесь mouseenter и mouseleave срабатывают один раз при входе и выходе мыши из родительского элемента motionPlitka. В вашем варианте обработчики срабатывали на действия с дочерними элемементами тоже

- indexToHeaderList = String(headerArr[choosenElem]);
+ indexToHeaderList = headerArr[choosenElem].innerText;

Возможно, вместо innerText вам больше подойдёт textContent (но вряд ли).

оператором typeof - пишет что это строка

Ну так вы же по-любому на typeof проверяли после того как сами руками к строке привели?

Так и должно быть

Да

Это не jQuery - тут надо циклом пройтись по каждому элементу из linkmap и навесить обработчик.

Вот так можно:

const print = s => console.log(s);
let s = `<a href="https://google.ru/link/123abc/><img src="google.png"><br>Гугл</a>`;
let s2 = `<a href="https://ya.ru/link><img src="ya.png"><br>Яндекс</a>`;
let s3 = `<a href="https://rambler.ru/link/address/><img src="rambler.png"><br>Рамблер</a>`;
let a = s.match(/(?<=<br>).+(?=<)/g)[0];
let b = s2.match(/(?<=<br>).+(?=<)/g)[0];
let c = s3.match(/(?<=<br>).+(?=<)/g)[0];
let arr = [[a, s], [b, s2], [c, s3]];
arr.sort((a, b) => a[0].charCodeAt(0) - b[0].charCodeAt(0));
print(arr);

Вы рассматриваете точки, линии и содержимое, как одтельные элементы.
Попробуйте увидеть блочную структуру



Один элемент - один блок. Внутри блока - содержимое и точка. У точки - два псевдоэлемента вверх и вниз большой высоты (к примеру 100vh) с абсолютным позиционированием относительно нее.
Чтобы линии не было видно за пределами блока, к блоку применяется обрезка (overflow:hidden)

Если умеете работать с хуками вордпресса можно попробовать перенести эту цену наверх. Вам нужно убрать функцию woocommerce_single_variation которая добавляет пустой блок для цены с экшена woocommerce_single_variation и добавить ее куда нибудь в другое место формы с вариациями потому что js вукомерса ожидает цену только там. Примерно так

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10);
add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20);

Файл в котором можно посмотреть что где вызывается это single-product/add-to-cart/variable.php. Скрыть статичную цену только в вариативном товаре можно через css, при необходимости проверять тип товара и повесить дополнительный класс.

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

можно ли как-то выполнять javascript код с сохранением не открывая вручную тысячи страниц?

Можно сохранить в localStorgae или IndexedDB хорошая библиотека localForage.