0xD34F

ну, например

const buttons = document.querySelectorAll('.item1');
const targets = document.querySelectorAll('.item2');
const className = 'red';

const updateClass = action => ({ target: t }) => {
  const index = Array.prototype.indexOf.call(buttons, t);
  if (index !== -1) {
    targets[index].classList[action](className);
  }
};

const wrapper = document.querySelector('#wrap1');
wrapper.addEventListener('click', updateClass('add'));
wrapper.addEventListener('dblclick', updateClass('remove'));

str.trim().replace(/\s{2,}/g, ' ')

или

str.split(' ').filter(Boolean).join(' ')

или

(str.match(/\S+/g) || []).join` `

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

let state = true;

document.querySelector('button').addEventListener('click', e => {
  state = !state;

  document.querySelectorAll('circle').forEach((n, i, a) => {
    setTimeout(() => {
      n.classList.toggle('st0', state);
      e.target.disabled = (state ? a.length - i : i + 1) !== a.length;
    }, (state ? a.length - i : i) * 3);
  });
});

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

let state = true;
const button = document.querySelector('button');
const circles = document.querySelectorAll('circle');

button.addEventListener('click', () => {
  state = !state;
  toggleCircle(0);
});

function toggleCircle(i) {
  if (i < circles.length) {
    setTimeout(() => {
      const index = state ? circles.length - i - 1 : i;
      circles[index].classList.toggle('st0', state);
      button.disabled = i !== circles.length - 1;
      toggleCircle(i + 1);
    }, 3);
  }
}

Ну или можно вместо таймаутов устанавливать интервал:

let state = true;
const circles = document.querySelectorAll('circle');

document.querySelector('button').addEventListener('click', function() {
  this.disabled = true;
  state = !state;

  let i = 0;
  const intervalID = setInterval(() => {
    const index = state ? circles.length - i - 1 : i;
    circles[index].classList.toggle('st0', state);
    if (++i === circles.length) {
      this.disabled = false;
      clearInterval(intervalID);
    }
  }, 3);
});

Так, что ли?

moment.utc(moment.duration(endTime) - moment.duration(startTime)).format('HH:mm')

var delayAnim = 4;
<...>
'animation-delay': '.' + delayAnim + 's'

Круто. Секунды, которые на самом деле не секунды, а десятые доли секунды. Пишите сразу 0.4 при объявлении переменной, не вводите людей в заблуждение.

Ну а само увеличение делается элементарно - добавляйте к исходному значению индекс, умноженный на шаг:

'animation-delay': (delayAnim + 0.2 * index) + 's'

удаляются последовательно только теги tr <...> вложенные теги td остаются

Не вложенные. Давайте повнимательнее взглянем на создание новой строки в таблице:

table.appendChild(tr);
<...>
table.appendChild(tdLeft);  // "Название"
table.appendChild(tdRight); //"Описание"
table.appendChild(tdDelete); //"Навигация"

Ячейки у вас добавляются непосредственно в tbody, а вовсе не в tr.

Кроме того, обработчики клика по кнопкам удаления у вас добавляются один раз, при загрузке страницы, то есть кнопки всех добавленных пользователем строк обработчиков клика иметь не будут. Вам следует освоить такой приём, как делегирование.

UPD. Исправлено.

Функция объявлена внутри другой функции, и использовать первую вы пытаетесь за пределами второй - естественно, там её нет. Области видимости в js - бегом гуглить и разбираться, это основы.

function getWinCount(team) {
  const el = Array
    .from(document.querySelectorAll('.table-item__name'))
    .find(n => n.textContent === team);

  return el ? +el.closest('tr').children[3].textContent : null;
}


const wins = getWinCount('Уфа');

UPD. Вынесено из комментариев:

Мой браузер не поддерживает ES-2015

На будущее: о таких вещах следует говорить сразу.

Будет работать в IE11:

function getWinCount(team) {
  var el = null;

  [].concat.apply([], document.querySelectorAll('.table-item__name')).forEach(function(n) {
    if (!el && n.textContent === team) {
      el = n;
    }
  });

  if (!el) {
    return null;
  }

  do {
    el = el.parentNode;
  } while (el.tagName !== 'TR');

  return +el.children[3].textContent;
}

Индекс неправильный. Нужное вам значение передаётся первым параметром в each:

$('.container').find('h2, h3').each(function(i) {

Его и используйте:

text = $('.select-list li a').eq(i).text();

не надо код, подскажите алгоритм

Думаю, это уже не актуально - раз вы опубликовали собственный вариант. Так что просто код:

function shorten(val) {
  if (val <= 10000) {
    return val.toString();
  }

  const thousands = val / 1000;
  const rounded = Math.round(thousands);
  const deviation = Math.sign(thousands - rounded);

  return `${[ '≈', '', '>' ][deviation + 1]}${rounded} т.`;
}

Ну и откуда тогда должна браться цена, если селект с ценой отсутствует? Можете подставлять случайное значение - как, подойдёт такой ответ? Нет? Тогда дополняйте вопрос.

UPD.

Цена завернута в див price prc-new

ОК, тогда замените

$('[name="variant"] option:checked').data('price')

на

$('.price.prc-new span').text()

$('input').on('input', function() {
  $(this).val((i, v) => Math.max(this.min, Math.min(this.max, v)));
});

или

document.querySelector('input').addEventListener('input', ({ target: t }) => {
  t.value = Math.max(t.min, Math.min(t.max, t.value));
});

$('.price').text((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});

// или

document.querySelectorAll('.price').forEach(n => {
  n.textContent = n.textContent.replace(/\d(?=(\d{3})+\D)/g, '$& ');
});

Ну или (что желательно), перед выводом пропускайте цену через toLocaleString.

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

function toggleClasses(block) {
  const info = block.querySelector('.infoWrapper');
  block.classList.toggle('marginBottom10');
  block.classList.toggle('marginBottom120');
  info.classList.toggle('displayNone');
  info.classList.toggle('displayBlock');
}

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

document.addEventListener('click', function(e) {
  const block = e.target.closest('.blockSvg');
  if (block) {
    const prevBlock = document.querySelector('.blockSvg.marginBottom120');
    if (prevBlock && prevBlock !== block) {
      toggleClasses(prevBlock);
    }

    toggleClasses(block);
  }
});

В результате, объём кода сократился на два порядка.

Ну и конечно, надо перевёрстывать, потому что вот это вот "подправляем положение блоков" - позорище какое-то.

В каких элементах и на сколько надо ограничить длину текста:

const className = 'dop_atr';
const maxlen = 250;

Чтобы все элементы обрабатывались индивидуально, вместо строки можно передавать в метод text функцию - вызывается для каждого элемента набора, принимает текущее текстовое содержимое элемента и возвращает новое:

$(`.${className}`).text((i, text) => {
  return text[maxlen] ? `${text.substring(0, maxlen)}...` : text;
});

Или, можно отказаться от jquery:

for (const n of document.getElementsByClassName(className)) {
  n.innerText = n.innerText.slice(0, maxlen) + (n.innerText.charAt(maxlen) && '...');
}

// или

document.querySelectorAll(`.${className}`).forEach(function(n) {
  n.textContent = n.textContent.replace(this, '$1...');
}, RegExp(`(.{${maxlen}}).+`));

document.addEventListener('click', function(e) {
  const el = document.getElementById(e.target.dataset.id);
  if (el) {
    el.checked = !el.checked;
  }
});

или

const buttons = document.querySelectorAll('[data-id]');
const onClick = e => checkboxes[e.target.dataset.id].checked ^= 1;
const checkboxes = Array
  .from(buttons, n => n.dataset.id)
  .reduce((acc, n) => (acc[n] = document.querySelector(`#${n}`), acc), {});

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

$('.tab__list').on('click', '.tab__item', function() {
  const
    $this = $(this),
    { label, ...attrs } = text[$this.data('tab')];

  $this.siblings().removeClass('tab__item--active');
  $this.addClass('tab__item--active');
  $('#formField').attr(attrs);
  $('#formLabel').text(label);
});

Вместо

.red{border:3px solid red;;}
.green{border:3px solid red;;}

пусть будет

.items-list-item-colors label {
  border: 3px solid red;
}

.items-list-item-colors label.active {
  border-color: green;
}

Соответственно, из разметки class="red" вырезаете.

Где, кому и какой класс будем переключать:

const containerSelector = '.items-list-item-colors';
const itemSelector = 'label';
const activeClass = 'active';

Такие есть варианты:

$(containerSelector).change(function() {
  $(itemSelector, this)
    .removeClass(activeClass)
    .has(':checked')
    .addClass(activeClass);
});

// или

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  this.querySelectorAll(itemSelector).forEach(n => {
    n.classList.toggle(activeClass, n.contains(t));
  });
}

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle('active', n === item);
    });
  }
});