0xD34F

Элементы, которым надо переключить класс (т.е., контент и заголовки табов) следует искать не по всей странице, а внутри контейнера, содержащего те табы, с которыми осуществляется взаимодействие. Т.е., от нажатого заголовка надо подняться до контейнера:

const containerSelector = '.tabs';
const headerSelector = `${containerSelector} .tabs-nav__item`;
const contentSelector = `${containerSelector} .tab`;
const activeClass = 'is-active';

function setActiveTab(header) {
  if (header instanceof Element && header.matches(headerSelector)) {
    const container = header.closest(containerSelector);
    const headers = container.querySelectorAll(headerSelector);
    const contents = container.querySelectorAll(contentSelector);
    const index = Array.prototype.indexOf.call(headers, header);
    const toggle = (n, i) => n.classList.toggle(activeClass, i === index);

    headers.forEach(toggle);
    contents.forEach(toggle);
  }
}


// делегирование, подключаем обработчик клика один раз для всех
document.addEventListener('click', e => {
  setActiveTab(e.target.closest(headerSelector));
});

// или, назначаем обработчик клика индивидуально каждому заголовку
document.querySelectorAll(headerSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => setActiveTab(e.currentTarget));

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

function getUsersInfo(ids, callback) {
  const results = [...Array(ids.length)];

  ids.forEach((n, i) => {
    getUserInfo(n, user => {
      results[i] = user;

      if (results.every(Boolean)) {
        callback(result);
      }
    });
  });
}

Вместо id назначаете элементам классы, которые будут указывать, чем является элемент (его надо кликать пользователю, или при клике переключать видимость) и атрибут, совпадающие значения которого будут указывать, кто с кем в паре:

<div class="title" data-name="first">
<div class="title" data-name="second">
...


<div class="list" data-name="first">
<div class="list" data-name="second">
...

$('.title').click(function() {
  $(`.list[data-name="${this.dataset.name}"]`).slideToggle('fast');
});

Если у обоих групп элементов есть общий родитель, и порядок элементов внутри родителей совпадает, тогда можно обойтись без дополнительного атрибута:

$('.title').click(function() {
  $('.list').eq($(this).index()).slideToggle('fast');
});

Если же общие предки есть у пар .title /.list, тогда можно так:

$('.title').click(function() {
  $(this).closest('здесь селектор общего предка').find('.list').slideToggle('fast');
});

async function addOptions(arr) {
  const result = [];

  for (const item of arr) {
    result.push({
      ...item,
      options: await fetchOptions(item.id),
      children: await addOptions(item.children),
    });
  }

  return result;
}

document.addEventListener('input', function(e) {
  const inputsWrapper = e.target.closest('.класс-блоков-которые-содержат-ваши-инпуты');
  if (inputsWrapper) {
    const inputs = [...inputsWrapper.querySelectorAll('input')];
    const lastInput = inputs.pop();
    lastInput.value = inputs.map(n => n.value).join(' ');
  }
});

str.slice(0, 3) + '-'.repeat(Math.max(0, str.length - 3))

// или

str.replace(/(?<=.{3})./g, '-')

// или

Array.from(str, (n, i) => i < 3 ? n : '-').join('')

// или

str.replace(/./g, (m, i) => i < 3 ? m : '-')

// или

str.match(/.{0,3}/) + Array(Math.max(0, str.length - 2)).join`-`

// или

str.substring(0, 3).padEnd(str.length, '-')

Так как у вас там jquery, цикл в явном виде не нужен:

$('button').click(e => $('.title').text($(e.target).text()));

Вот на чистом js да, придётся вручную кнопки перебирать:

const onClick = e => document.querySelector('.title').innerText = e.target.innerText;
document.querySelectorAll('button').forEach(n => n.addEventListener('click', onClick));

Конечно, если не знать про делегирование:

document.addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'BUTTON') {
    document.querySelector('.title').textContent = t.textContent;
  }
});

С какими элементами имеем дело, какие классы будем им переключать, как ограничено количество одновременно активных:

const itemSelector = '.product';
const activeClass = 'checked';
const disabledClass = 'unchecked';
const activeLimit = 3;

Делегирование, обработчик клика назначаем один раз для всех элементов:

document.addEventListener('click', e => {
  const cl = e.target.closest(itemSelector)?.classList;
  if (cl && !cl.contains(disabledClass)) {
    cl.toggle(activeClass);
    updateDisabled();
  }
});

updateDisabled();

function updateDisabled() {
  const [ notActive, active ] = Array.prototype.reduce.call(
    document.querySelectorAll(itemSelector),
    (acc, n) => (acc[+n.classList.contains(activeClass)].push(n), acc),
    [ [], [] ]
  );

  const limitReached = activeLimit <= active.length;
  notActive.forEach(n => n.classList.toggle(disabledClass, limitReached));
}

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

const items = [...document.querySelectorAll(itemSelector)];
let activeCount = 0;

items.forEach(n => n.addEventListener('click', onClick));

updateDisabled(items.filter(n => n.classList.contains(activeClass)).length);

function onClick({ currentTarget: { classList: cl } }) {
  if (!cl.contains(disabledClass)) {
    updateDisabled(cl.toggle(activeClass) ? 1 : -1);
  }
}

function updateDisabled(change) {
  const limitReached = (activeCount += change) >= activeLimit;
  for (const { classList: cl } of items) {
    cl.toggle(disabledClass, !cl.contains(activeClass) && limitReached);
  }
}

pathname
  .match(/\/[^/]+/g)
  .map((n, i, a) => a.slice(0, i + 1).join(''))
  .map(n => ({
    title: routes.find(r => RegExp(`^${r.url.replace(/:[^\/]+/g, '[^\/]+')}$`).test(n))?.title ?? '',
    url: n,
  }))

const arr = Array.from(str.matchAll(/[^\/]+/g), n => n[0]);

// или

const arr = str.match(/[^\/]+/g) ?? [];

// или

const arr = str.split('/').filter(Boolean);

// или

const arr = Array.prototype.reduce.call(str, (acc, n, i) => (
  (n !== '/') && (
    acc[1] !== i - 1 && acc[0].push(''),
    acc[0][acc[0].length - 1] += n,
    acc[1] = i
  ),
  acc
), [ [], -Infinity ])[0];

<button data-step="-1">-</button>
<input value="1">
<button data-step="+1">+</button>

const values = [ 1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 56, 64 ];

for (const n of document.querySelectorAll('[data-step]')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  const input = document.querySelector('input');
  const index = +this.dataset.step + values.indexOf(+input.value);
  input.value = values[Math.max(0, Math.min(values.length - 1, index))];
}

const elements = el.closest('.calc').querySelectorAll('.range__control');

const price = Array.prototype.reduce.call(
  elements,
  (acc, n) => acc * n.value,
  1
);

// или

let price = 1;
for (const { value } of elements) {
  price *= value;
}

// или

const price = eval(Array.from(elements, n => n.value).join('*'));

После того, как назначили обработчик, просто сгенерируйте соответствующее событие. В данном случае, это будет вызов метода change без параметров:

$('select').change(function() { ... }).change();

Object.values(arr.reduce((acc, { id, value }) => {
  const type = typeof value;
  acc[id] = acc[id] ?? { id };
  acc[id][type] = (acc[id][type] ?? 0) + 1;
  return acc;
}, {}))

Добавьте $(this).remove() в конец обработчика клика.

str.match(/[^.]+(?=\.[^.]+(\/|$))/)[0]

Пусть второй параметр будет массивом индексов, по умолчанию - пустой (соответственно, когда вызываете функцию сами, его передавать не надо). В начале обработки элемента данных кладёте его индекс в массив, после обработки убираете. Ну а текст - собираете из массива какой вам нужен:

const createTreeElement = (data, index = []) =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n, i) => (
        index.push(i),
        ul.append(document.createElement('li')),
        ul.lastChild.append(index.join('_'), createTreeElement(n.children, index)),
        index.pop(),
        ul
      ), document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

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

const createTreeHTML = (data, index = '') =>
  data instanceof Array && data.length
    ? `<ul>${data.map((n, i) => `
         <li>
           ${(i = index + (index && '_') + i)}
           ${createTreeHTML(n.children, i)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

const filtered = arrWithObj.filter(n => !arr.includes(n.id));

// или

const filtered = arrWithObj.filter(function(n) {
  return !this.has(n.id);
}, new Set(arr));

// или

const filtered = Array.from(arr.reduce(
  (acc, n) => (acc.delete(n), acc),
  new Map(arrWithObj.map(n => [ n.id, n ]))
).values());

const ul = document.querySelector('.ul-parent');

const groupedNodes = Array.prototype.reduce.call(
  ul.children,
  (acc, n) => {
    const k = n.textContent[0].toLowerCase();
    (acc[k] = acc[k] ?? []).push(n);
    return acc;
  },
  {}
);

ul.replaceWith(...Object.entries(groupedNodes).map(n => {
  const ul = document.createElement('ul');
  ul.classList.add('ul-parent', n[0] + '-litter');
  ul.append(...n[1]);
  return ul;
}));

или

const ul = document.querySelector('.ul-parent');

const groupedHTML = Array
  .from(ul.querySelectorAll(':scope > li'))
  .reduce((acc, { innerText: [ c ], outerHTML }) => {
    const k = c.toLowerCase();
    (acc[k] = acc[k] ?? []).push(outerHTML);
    return acc;
  }, {});

ul.outerHTML = Object
  .entries(groupedHTML)
  .map(([ k, v ]) => `<ul class="ul-parent ${k}-litter">${v.join('')}</ul>`)
  .join('');

document.addEventListener('click', e => {
  const div = e.target.closest('button')?.closest('div');
  if (div) {
    console.log(div.id);
  }
});

или

document.querySelectorAll('div button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(e.currentTarget.closest('div').id));