0xD34F

.hover {
  opacity: 0.5;
}

const map = document.querySelector('.map svg');
map.addEventListener('mouseover', onHover);
map.addEventListener('mouseout', onHover);

function onHover({ target: t }) {
  this.querySelectorAll('.hover-effect').forEach(n => {
    n.classList.toggle('hover', n !== t && this !== t);
  });
}

Если выводить в консоль то коллекции не чем не отличаются.

Это не так. В первом случае HTMLCollection, во втором NodeList. Отличие первой от второго состоит в том, что

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

То есть, обходите коллекцию, и одновременно модифицируете её. Удалили нулевой элемент - на его место встал первый, а индексу сделали ++. На следующей итерации удалять будете первый, и новый нулевой / бывший первый уже никуда не денется. Как и остальные элементы, изначально имевшие нечётные индексы.

const partition = (obj, f) => Object
  .entries(obj)
  .reduce((acc, [ k, v ]) => (
    acc[+!f(k, v)][k] = v,
    acc
  ), [ {}, {} ]);


const [ otherObj, anotherObj ] = partition(obj, k => [ 'a', 'd', 'e', 'f' ].includes(k));

$('.scheme-wrap polygon').click(function() {
  $(`.scheme-wrap__item[data-id="${this.dataset.id}"] .scheme-wrap__popup`).show();
});

или

.scheme-wrap__popup.visible {
  display: block;
}

document.querySelectorAll('.scheme-wrap polygon').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { id } } }) {
  const selector = `.scheme-wrap__item[data-id="${id}"] .scheme-wrap__popup`;
  const popup = document.querySelector(selector);
  if (popup) {
    popup.classList.add('visible');
  }
}

Если буквально искать элемент "слева", то перебираем предыдущие элементы относительно кликнутой кнопки, пока не наткнёмся на инпут:

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('sbros')) {
    for (let el = e.target; el = el.previousElementSibling;) {
      if (el.classList.contains('fields')) {
        el.value = el.getAttribute('default-value');
        break;
      }
    }
  }
});

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

document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.sbros')) {
    const el = t.closest('здесь селектор обёртки').querySelector('.fields');
    el.value = el.getAttribute('default-value');
  }
});

Ещё вариант - можно вычислять индекс кликнутой кнопки и обращаться к инпуту с таким же индексом:

const inputs = document.querySelectorAll('.fields');
const buttons = [...document.querySelectorAll('.sbros')];
buttons.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const el = inputs[buttons.indexOf(e.target)];
  el.value = el.getAttribute('default-value');
}

const chunked = (arr, chunkSize) =>
  Array.from(
    { length: Math.ceil(arr.length / chunkSize) },
    (n, i) => arr.slice(i * chunkSize, (i + 1) * chunkSize)
  );


const arr = chunked(Object.entries(obj), 10).map(Object.fromEntries);

Object.values(arr.reduce((acc, n) => {
  const k = n.value.fromVenueId.value;
  const v = n.value.totalUsers.value;

  (acc[k] = acc[k] || { fromVenueId: k, totalUsers: 0 }).totalUsers += v;

  return acc;
}, {}))

event.target.tagName != 'button'

Ясно:

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

Есть и менее явный косяк в этой проверке - все ли существующие на странице кнопки должны что-то там удалять? Даже если сейчас это так, будет ли так всегда? Лучше проверять наличие класса:

event.target.classList.contains('remove-button')

// или

event.target.matches('.remove-button')

Сколько может быть элементов с одинаковыми id? - один. Там, где id повторяются, замените их классами.

$('.show').click(function() {
  $(this).hide().next('.var').slideDown().find('.hide').show();
});

$('.hide').click(function() {
  $(this).hide().closest('.var').slideUp().prev('.show').show();
});

У вас в школе по английскому была честная двойка, или давали взятки ради троек? Ну, то есть - откройте словарь, и посмотрите, как переводится слово "next". Потом посмотрите в каком порядке расположены ваши элементы.

rating = Math.max(1, Math.ceil((e.clientX - горизонтальнаяКоординатаЭлемента) / ширинаЭлемента * 5))

https://jsfiddle.net/xqeLtz6r/

$(this).closest('tr').prevAll('tr:has(.name-pnd)').first()

https://jsfiddle.net/8odvzagr/

const html = [...Array(3)].map((n, i) => `<div class="count">${++i}</div>`).join('');
document.querySelectorAll('.counts').forEach(n => n.insertAdjacentHTML('beforeend', html));

или

const counts = document.querySelectorAll('.counts');

for (let i = 0; i < counts.length; i++) {
  for (let j = 0; j < 3; j++) {
    const el = document.createElement('div');
    el.className = 'count';
    el.innerText = j + 1;
    counts[i].appendChild(el);
  }
}

или

const div = document.createElement('div');
div.classList.add('count');

const fragment = document.createDocumentFragment();
fragment.append(...Array.from({ length: 3 }, (n, i) => (
  n = div.cloneNode(),
  n.textContent = -~i,
  n
)));

for (const n of document.querySelectorAll('.counts')) {
  n.append(fragment.cloneNode(true));
}

Получить отдельно, объединить:

$('div').eq(0).add($('span').eq(0))

Можно функцию сделать, которая будет принимать массив селекторов:

const getFirst = selectors => selectors.reduce((acc, n) => acc.add($(n).eq(0)), $());

const $first = getFirst([ 'div', 'span' ]);

Из элемента стучимся в его родительский элемент, из родителя получаем коллекцию вложенных элементов, отбрасываем исходный элемент:

const siblings = Array.prototype.filter.call(
  this.parentNode.children,
  n => n !== this
);

Это если делать по-простому. Но есть и дурацкий вариант - можно пробежаться по ссылкам на предыдущие и следующие элементы:

const siblings = [];
for (let el = this; (el = el.previousElementSibling); siblings.unshift(el)) ;
for (let el = this; (el = el.nextElementSibling); siblings.push(el)) ;

$('.openFormPopup').click(e => $('#btn-clicked').val(e.target.dataset.title));

[...document.querySelectorAll('li')].reduce((acc, n) => {
  return acc.then(() => {
    return new Promise(r => {
      setTimeout(() => r(console.log(n.textContent)), 1000);
    });
  });
}, Promise.resolve())

Здесь только регуляркой или как?

Конечно, использовать регулярные выражения не обязательно:

function incrementNumberInString(str) {
  for (let i = 0, iNum = -1; i < str.length; i++) {
    if ('0123456789'.includes(str[i])) {
      if (iNum === -1 && str[i - 1] === '[') {
        iNum = i;           
      }
    } else if (iNum !== -1 && str[i] === ']') {
      return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
    } else {
      iNum = -1;
    }
  }

  return str;
}

Но с ними будет гораздо проще:

str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)

Зачем искать какие-то совпадения внутри строк? Вырезаете нужный кусок и проверяете его наличие в массиве:

const getFreeDomainsCount = arr => arr
  .map(n => n.split('@')[1])
  .filter(n => freeEmailDomains.includes(n))
  .reduce((acc, n) => (++acc[n], acc), Object.fromEntries(freeEmailDomains.map(n => [ n, 0 ])));

const obj = arr.find(n => n.id === newObj.id);
if (obj) {
  Object.assign(obj, newObj);
} else {
  arr.push(newObj);
}