0xD34F

Чтобы фильтры не слетали, надо при изменении значения одного обрабатывать значения всех. То есть, по событию change собираете значения всех фильтров, отбрасываете те, где ничего не выбрано, при фильтрации показываете или скрываете элемент в зависимости от того, соответствует ли он всем выбранным значениям или нет. Код может выглядеть как-то так, например (все атрибуты тут не простые, а data - сделайте у себя так же):

const $filters = $('.filter').change(function() {
  const filters = $filters
    .get()
    .filter(n => n.value)
    .map(n => [ n.dataset.name, n.value ]);

  $('.product')
    .hide()
    .filter((_, el) => filters.every(n => el.dataset[n[0]] === n[1]))
    .show();
});

Не подключен jquery.

Лишний пробел в стилях - вместо .modal-wrapper .open { должно быть .modal-wrapper.open {.

• Обрабатываете не то событие - должно быть blur, а не focus
  
• Пытаетесь вызвать toUpperCase не у строки, а у массива - забыто [0]
  
• Возвращаете результат в никуда, вместо того, чтобы установить значение инпута
  

И вообще, всё это делается гораздо короче:

input.addEventListener('blur', function() {
  const value = this.value.trim();
  if (value) {
    this.value = value
      .split(/\s+/)
      .map(n => n[0].toUpperCase() + n.slice(1))
      .join(' ');
  }
});

// или

input.addEventListener('blur', ({ target: t }) => {
  t.value = t.value
    .trim()
    .replace(/\s+/g, ' ')
    .replace(/(^|\s)\S/g, m => m.toUpperCase());
});

const getPrimitiveProps = (obj) =>
  Object.entries(obj).reduce((acc, [ k, v ]) => ({
    ...acc,
    ...(v instanceof Object ? getPrimitiveProps(v) : { [k]: v }),
  }), {});

или

const getPrimitiveProps = (obj) =>
  Object.assign({}, ...Object.entries(obj).map(([ k, v ]) =>
    v instanceof Object ? getPrimitiveProps(v) : { [k]: v }
  ));

document.addEventListener('keydown', e => {
  if (e.key === 'Backspace' && e.target !== display) {
    display.value = display.value.slice(0, -1);
    // или
    display.value = display.value.substring(0, display.value.length - 1);
    // или
    display.value = display.value.replace(/.$/, '');
    // или
    display.value = display.value.match(/.*(?=.$)/);
    // или
    display.value = [...display.value].filter((n, i, a) => -~i < a.length).join('');
  }
});

$(document).click(function(e) {
  if (!$panel.has(e.target).length && $panel.hasClass('visible')) {
    hidePanel();
  }
});

Если подумать, то регулярные выражения тут не нужны:

const ip = str.split(':', 1)[0];

Если подумать ещё, то всё равно не нужны:

const ip = str.slice(0, str.indexOf(':'));

Но если очень хочется, то можно так:

const ip = str.match(/[\d.]+/).pop();

Или так:

const ip = str.replace(/:.+$/, '');

И даже так тоже можно:

const [ ip ] = /.+(?=:)/.exec(str);

const plainToNested = (source, target = {}) =>
  Object.entries(source).reduce((acc, [ path, val ]) => {
    const keys = path.split('.');
    const key = keys.pop();
    keys.reduce((p, c) => p[c] = p[c] || {}, acc)[key] = val;
    return acc;
  }, target);

arr.lenght

Вот же позорище.

arr[x].lenght

Два раза позорище.

Слова lenght нет. Есть length. Подобные опечатки могли бы и сами обнаружить.

Кликайте вручную нужный элемент после инициализации аккордеона, типа так.

Или добавьте конструктору параметр - индекс элемента, который должен быть открыт после инициализации, и обрабатывайте его соответствующим образом, например.

На какие кнопки надо нажимать, в каком data-атрибуте лежит id и куда его надо записывать:

const buttonSelector = '.one-click-button';
const key = 'id';
const attr = `data-${key}`;
const input = document.querySelector('#one_b_id');

Как достать из кнопки значение атрибута:

const getId = el => el.dataset[key];
// или
const getId = el => el.getAttribute(attr);
// или
const getId = el => el.attributes[attr].value;

Делегирование, обработчик добавляется один раз, клик ловим на документе, надо проверять, что клик случился на кнопке, а не где-то ещё:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = getId(button);
  }
});

Или, назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = getId(e.currentTarget));

/^[а-яё]{3,}(\-[а-яё]{3,})?$/i

Как я могу проверить на наличие в начале строки undefined и удалить её?

А может лучше вы сделаете так, чтобы никаких undefined не было? - исправьте серверный код.

Если же хотите идти путём говнокодера: str.replace(/^undefined/, '').

Замените

divParent.insertBefore(elems[i].cloneNode(true), null);

на

divParent.insertBefore(elems[i].cloneNode(true), divParent.firstChild);
// или
divParent.insertAdjacentElement('afterbegin', elems[i].cloneNode(true));
// или
divParent.prepend(elems[i].cloneNode(true));

А вообще, можно и без клонирования сделать:

for (const n of document.getElementsByClassName('basic')) {
  n.after(document.createElement('div'));
  n.nextSibling.classList.add('parent');
  n.nextSibling.append(document.createElement('b'));
  n.nextSibling.lastChild.textContent = 'Важная строка';
  n.nextSibling.prepend(n);
}

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

document.querySelectorAll('.basic').forEach(n => {
  const html = `
    <div class="parent">
      ${n.outerHTML}
      <b>Важная строка</b>
    </div>
  `;

  n.outerHTML = html;
  // или
  n.insertAdjacentHTML('afterend', html);
  n.remove();
  // или
  n.replaceWith(document.createRange().createContextualFragment(html));
  // или
  n.replaceWith(...new DOMParser().parseFromString(html, 'text/html').body.childNodes);
});

Ну так querySelector возвращает один элемент. Надо использовать querySelectorAll:

document.querySelectorAll('.number').forEach(function(n) {
  const top = n.getBoundingClientRect().top;
  const end = +n.dataset.max;

  window.addEventListener('scroll', function onScroll() {
    if (window.pageYOffset > top - window.innerHeight / 2) {
      this.removeEventListener('scroll', onScroll);
      let start = +n.innerHTML;
      const interval = setInterval(function() {
        n.innerHTML = ++start;
        if (start === end) {
          clearInterval(interval);
        }
      }, 5);
    }
  });
});

const max = Math.max(...Object.values(obj[0]).map(n => n ? n.level : -Infinity));

const objectParser = (data, path = '') => Object.assign({
  [path || '<root>']: data,
}, ...(data instanceof Object
  ? Object.entries(data).map(([ k, v ]) => objectParser(v, `${path}[${k}]`))
  : []
));

Из показанного кода сами написали сколько? Хоть одна строка есть? Или тут стопроцентное ctrl-c + ctrl-v?

• Отсутствует запятая после определения массива points
  
• Отсутствует запятая после определения массива pointl
  
• После определения link вместо точки с запятой должна быть запятая, либо перед определением getPointData пропущено ключевое слово var
  
• После определения getPointData вместо запятой должна быть точка с запятой
  
• После цикла for не должно быть запятой
  

const parentSelector = 'селектор родительского элемента';
const noClassSelector = 'селектор элементов, которым не надо добавлять класс';
const className = 'класс';

$(parentSelector)
  .children()
  .removeClass(className)
  .not(noClassSelector)
  .addClass(className);

// или

for (const n of document.querySelector(parentSelector).children) {
  n.classList.toggle(className, !n.matches(noClassSelector));
}

Замените условие цикла, вместо n < locals.length сделайте n < locals.length / 3.

Или измените шаг - с 1 на 3, и обращения к элементам массива: вместо 3 * n будет просто n, вместо 3 * n + 1 будет n + 1, и т.д.