0xD34F

Не вижу причин, по которым цвета должны быть классами. Замените на data-атрибуты:

<div data-color="black"></div>
<div data-color="white"></div>

document.addEventListener('click', ({ target: { dataset: { color } } }) => {
  if (color) {
    document.querySelector('button').dataset.id = color;
  }
});

// или

const button = document.querySelector('button');
const onClick = e => button.setAttribute('data-id', e.target.getAttribute('data-color'));
document.querySelectorAll('[data-color]').forEach(n => n.addEventListener('click', onClick));

str.replace(/(?<!^)\+|[^\d+]/g, '')

$('.btn-show').on('click', function() {
  $(this).toggleClass('.flip');
});

Во-первых, строка, передаваемая в метод toggleClass, должна содержать имя класса, а вовсе не соответствующий селектор. Так что просто 'flip', без точки.

Во-вторых, вы пытаетесь назначить обработчик клика несуществующим элементам, так что код внутри обработчика никогда не будет выполнен. У вас уже есть делегированный обработчик клика для .btn-show - вот там и дёргайте toggleClass.

Никак.

Делайте async функцию, где будет цикл, в теле которого await fetch:

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

  for (const item of arr) {
    result.push(await fetch(...));
  }

  return result;
}

const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);

или

function* range(start, stop, step) {
  if (stop === undefined) {
    stop = start;
    start = 0;
  }

  if (start === stop) {
    step = 1;
  }

  if (step === undefined) {
    step = Math.sign(stop - start);
  }

  if (start <= stop && step > 0 || start >= stop && step < 0) {
    for (let i = start; step < 0 ? i >= stop : i <= stop; i += step) {
      yield i;
    }
  }
}

console.log(Array.from(range(3, 9))); // [3, 4, 5, 6, 7, 8, 9]

console.log([...range(-5)]); // [0, -1, -2, -3, -4, -5]

for (const n of range(100, 200, 33)) {
  console.log(n); // 100  133  166  199
}

const r = range(12, -7, -5);
for (let n; !(n = r.next()).done;) {
  console.log(n.value); // 12  7  2  -3
}

Останавливайте всплытие события:

$('li').click(function(e) {
  e.stopPropagation();
  $(this).closest('ul').toggleClass('red');
});

Или ловите клик только на корневом элементе списка:

$('ul').first().click(function(e) {
  $(e.target).closest('ul').toggleClass('red');
});

const replacements = {
  worksAmount: 187,
  reviewsAmount: 666,
};

const newStr = str.replace(/\$\$\[(\w+)\]/g, (m, g1) => replacements[g1] ?? m);

str.match(/(?<=\()\d+(\.\d+)?(?=\D*\))/g)

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

  for (const item of arr) {
    result.push(await item(result[result.length - 1]));
  }

  return result;
}

Или

function chain(arr) {
  const result = [];

  return arr
    .reduce((prev, curr) => prev.then(curr).then(r => (result.push(r), r)), Promise.resolve())
    .then(() => result);
}

Рекурсия есть:

const findInTree = (tree, childrenKey, test) =>
  (Array.isArray(tree) ? tree : []).reduce((found, n) =>
    found ?? (test(n) ? n : findInTree(n[childrenKey], childrenKey, test))
  , null);

Рекурсии нет:

const findInTree = function(tree, childrenKey, test) {
  const stack = [];

  for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
    if (i === arr.length) {
      [ i, arr ] = stack.pop();
    } else if (test(arr[i])) {
      return arr[i];
    } else {
      stack.push([ i, arr ]);
      [ i, arr ] = this(arr[i][childrenKey]);
    }
  }

  return null;
}.bind(x => [ -1, x instanceof Array ? x : [] ]);

Ищем:

const obj = findInTree(arr, 'children', n => n.id === id);
if (obj) {
  obj.isSelected = isSelected;
}

Одна валюта:

arr.reduce((acc, n) => acc + n.startsWith(`${currency} `) * /\d+$/.exec(n), 0)

Все:

arr.reduce((acc, n) => {
  const [ currency, sum ] = n.split(' ');
  acc[currency] = (acc[currency] ?? 0) + +sum;
  return acc;
}, {})

Во-первых - вы не рассказали, зачем вам тут нужны именно классы. А значит - классы вам не нужны. Меняйте на data-атрибут. Например, type:

const key = 'type';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

Во-вторых, как из элемента извлечь значение атрибута, а из значения атрибута убрать цифры:

const getTypeGroup = el => el.dataset[key].replace(/\d/g, '');

// или

const getTypeGroup = el => el.getAttribute(attr).match(/\D+/)[0];

// или

const getTypeGroup = el => el.attributes[attr].value.split(/\d/).shift();

В третьих:

document.addEventListener('click', e => {
  const el = e.target.closest(attrSelector);
  if (el) {
    console.log(getTypeGroup(el));
  }
});

// или

document.querySelectorAll(attrSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getTypeGroup(e.currentTarget)));

Внутри обработчика submit добавьте this в качестве второго параметра при вызове $.

Вспомогательная функция - нарезание массивоподобного объекта на куски заданного размера:

const chunked = (data, chunkSize, slice = data.slice) =>
  Array.from(
    { length: Math.ceil(data.length / chunkSize) },
    function(_, i) {
      return this(i * chunkSize, (i + 1) * chunkSize);
    },
    (slice instanceof Function ? slice : Array.prototype.slice).bind(data)
  );

Где элементы находятся, во что и по сколько надо оборачивать:

const parentSelector = '.row-module';
const wrapperTag = 'div';
const wrapperClass = 'wrap';
const wrapSize = 4;

Оборачиваем:

for (const $n of chunked($(parentSelector).children(), wrapSize)) {
  $n.wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}

или

const parent = document.querySelector(parentSelector);
chunked(parent.children, wrapSize).forEach(n => {
  parent.append(document.createElement(wrapperTag));
  parent.lastChild.classList.add(wrapperClass);
  parent.lastChild.append(...n);
});

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

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, '-')