0xD34F

Так?

<div class="range">
  <input type="range" min="0" max="100" step="1" value="20">
  <input type="text" value="20">
</div>

const range = document.querySelector('.range [type="range"]');
const text = document.querySelector('.range [type="text"]');
range.oninput = () => text.value = range.value;
text.oninput = () => range.value = text.value;

// или

document.querySelector('.range').addEventListener('input', e => {
  e.currentTarget.querySelectorAll('input').forEach(n => n.value = e.target.value);
});

// или

const inputs = document.querySelectorAll('.range input');
const onInput = e => inputs.forEach(n => n.value = e.target.value);
inputs.forEach(n => n.addEventListener('input', onInput));

Во-первых, вместо клика надо обрабатывать событие change.

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

$('.add-task').click(function() {
  const task = $('.input-task').val();
  if (!task) {
    alert('пусто');
    return false;
  }

  $('.todos-container').append(`
    <div class="todo-container">
      <label>
        <b class="task-text">${task}</b>
        <input class="toggle-task" type="checkbox">
      </label>
      <button class="del-task">delete</button>
    </div>
  `);

  $('.input-task').val('');
});

$('.todos-container')
  .on('change', '.toggle-task', function() {
    $(this)
      .closest('.todo-container')
      .find('.task-text')
      .toggleClass('task-done', this.checked);
  })
  .on('click', '.del-task', function() {
    $(this).closest('.todo-container').remove();
  });

.task-done {
  text-decoration: line-through;
}

Что нужно добавить?

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

function createTree(data, idKey, parentKey, rootParent) {
  const tree = {};
  const obj = {};

  data.forEach(n => obj[n[idKey]] = Object.assign({}, n));

  Object.values(obj).forEach(n => {
    if (n[parentKey] === rootParent) {
      tree[n[idKey]] = n;
    } else {
      const t = obj[n[parentKey]];
      t.children = t.children || {};
      t.children[n[idKey]] = n;
    }
  });

  return tree;
}


const tree = createTree(data, 'id', 'parent_id', 0);

$('input').on('focus blur', function(e) {
  $(this).toggleClass('active', e.type === 'focus');
});

или

const onFocus = e => e.target.classList.toggle('active', e.type === 'focus');

document.querySelectorAll('input').forEach(n => {
  n.addEventListener('focus', onFocus);
  n.addEventListener('blur', onFocus);
});

А вообще - надо ли добавлять какие-то классы? Есть же :focus.

document.querySelector('table').addEventListener('input', function(e) {
  e.target.style.backgroundColor = 
    e.target.innerHTML имеет какое надо значение
      ? 'lime'
      : 'red';
});

function toggleSubmenu() {
  const submenu = this.closest('li').querySelector('.rz-child-menu');
  submenu.classList.toggle('opened');
}

const vvOpen = document.querySelectorAll('.rz-open-menu-element');
vvOpen.forEach(n => n.addEventListener('click', toggleSubmenu));

.rz-left-menu ul li ul.rz-child-menu.opened {
  display: block;
}

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

document.querySelector('.rz-left-menu').addEventListener('click', function(e) {
  if (e.target.classList.contains('rz-open-menu-element')) {
    e.target.closest('li').querySelector('.rz-child-menu').classList.toggle('opened');
  }
});

Задавать тип обрабатываемого события надо явно, так что способа легко и просто сделать то, что вы хотите, нет.

Можно подготовить список типов событий заранее и повесить общий обработчик:

const events = [ 'mousemove', 'mouseleave', 'mousedown', ... ];

$element.on(events.join(' '), function(e) { ... })

Или попробовать собрать имена типов событий, перебирая DOM-свойства элемента - имена обработчиков выглядят как "on<тип события>":

const events = [];
for (const k in element) {
  if (k.indexOf('on') === 0) {
    events.push(k.slice(2));
  }
}

$(element).on(events.join(' '), function(e) {
  console.log(e.type);
});

Объявите счётчик цикла с помощью let вместо var - тогда closeBtn[i] будет таким, как вам надо.

Или, обращайтесь к кликнутому элементу через объект события:

for (const n of document.querySelectorAll('.closebtn')) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  const parent = e.currentTarget.parentNode;
  // ...
}

Правильно - никак. Обрабатываем только движение, а информацию о нажатых кнопках берём из объекта события:

wrap.on('mousemove', function(e) {
  if (!e.buttons) {
    return;
  }

  // здесь ваш код
});

Сейчас у вас checkTimerId и sendTimerId существуют в единственных экземплярах - одни на все элементы, содержащиеся в наборе, на который ссылается this в trackCoords. События, по которым устанавливаются/снимаются интервалы всплывают, а элементы вложены один в другой - так что когда курсор уходит с внешнего элемента на внутренний, то сначала снимаются интервалы внешнего элемента, затем устанавливаются интервалы внутреннего элемента, затем событие mouseover, случившееся на внутреннем элементе достигает внешнего, и там опять устанавливаются интервалы, при этом идентификаторы интервалов внутреннего элемента затираются, после чего снять их уже нельзя.

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

$.fn.trackCoords = function(options) {
  return this.each(function() {
    const $element = $(this);
    // ...
  });
};

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

$element.mouseover(function(e) {
  if (this !== e.target) {
    // чужое событие - не интересно, не обрабатываем
    return;
  }
 
  // ...
});

Кроме того, устанавливать обработчик события mousemove внутри обработчика mouseover - сомнительная затея. При каждом наведении курсора на элемент устанавливается новый обработчик, зачем это? Установите его один раз, там же, где устанавливаются обработчики mouseover/mouseout.

Можно указать, какие конкретно элементы должны сортироваться. Типа так:

$('#page_list').sortable({
  items: '> .action-box',
});

Забыли назначить имена элементам формы. Типа, <input name="firstname" ....

Получать значения из формы надо внутри обработчика события submit, а не до его подключения (конечно, если вам нужны актуальные значения) - разместите строку const formData = new FormData(formElement); после e.preventDefault();.

Кстати, необязательно обращаться к переменной, ссылающейся на элемент формы, можно воспользоваться объектом события: const formData = new FormData(e.target);.

А если заменить стрелочную функцию на обычную, то можно и так делать: const formData = new FormData(this);.

Поясните это поведение

Вы объявили регулярное выражение с модификатором g - то есть, ищутся все совпадения с шаблоном, а не только первое. Вы вызываете метод test - совпадение найдено, круто. Вызываете снова - поиск начинается не с начала, а с того места, где он был окончен в прошлый раз. Разумеется, в этот раз ничего не найдено. Вызываете test в третий раз - снова всё хорошо, потому что в прошлый раз совпадения кончились, поиск снова выполняется с начала строки.

посоветуйте как вывернуть так, чтобы нормально отрабатывало

1. Уберите модификатор g.

2. После каждого вызова test вручную переустанавливайте позицию, с которой надо начинать поиск совпадения с шаблоном: hyper.lastIndex = 0;. Разумеется, этот вариант является говнокодом.

Исправлено. Что было не так:

1. В jsfiddle не генерируется событие DOMContentLoaded, по которому демка инициализируется. (UPD. Исправили эту дичь, неактуально).

2. У вас была подключена старая версия плагина.

Получаем select:

const select = document.querySelector('.table__select');

// или

const [ select ] = document.getElementsByClassName('table__select');

Добавляем в него option'ы:

select.innerHTML = arr.map(n => `<option>${n}</option>`).join('');

// или

select.append(...arr.map(n => new Option(n)));

// или

for (const n of arr) {
  const option = document.createElement('option');
  option.text = n;
  select.appendChild(option);
}

Похоже на то, что вам надо?

const arr = [
  [ 2, 7, 2 ],
  [ 2, 5, 4 ],
  [ 2, 1, 5 ],
  [ 3, 1, 2 ],
];

const [ val, iRow, iCol ] = arr
  .map((n, i) => n.reduce((min, m, j) => min[0] <= m ? min : [ m, i, j ], [ Infinity, -1 ]))
  .reduce((min, n) => min[0] <= n[0] ? min : n);

UPD. Если нужно обрабатывать массивы произвольной размерности, можно применить рекурсию:

const arr = [
  [ 2, 7, 2, [ 5, [ 4, [ 3 ], 2 ] ] ],
  [ 2, 5, [ 2, 6, 5, 2 ], 4 ],
  [ 2, 1, [ [ [ 9, 0, 1 ], [ [ [ 1 ] ] ], -1 ] ], 5 ],
  [ 3, 1, 2 ],
];

const minElemWithIndex = arr =>
  arr.reduce((min, n, i) => {
    const m = n instanceof Array
      ? minElemWithIndex(n)
      : [ n, [] ];

    m[1].unshift(i);

    return m[0] < min[0] ? m : min;
  }, [ Infinity, [] ]);


const [ val, indices ] = minElemWithIndex(arr);

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: 'https://api.novaposhta.ua/v2.0/json/',
  data: JSON.stringify({
    modelName: 'Address',
    calledMethod: 'searchSettlements',
    methodProperties: {
      CityName: 'ки',
      Limit: 555
    },
    apiKey: 'f11a8e14401ddcf710f7195b4ebe358c'
  }),
  headers: {
    'Content-Type': 'application/json'
  },
  xhrFields: {
    withCredentials: false 
  },
  success: function(texts) {
    console.log(texts);
  },
});

Добавить обработчик onChange:

onChange(data) {
  $('input[name="sum"]').val(data.from);
}

И как поступить, если слайдера например два.

onChange(data) {
  data.input
    .closest('селектор блоков со слайдерами')
    .find('селектор инпутов, в которые надо копировать значения')
    .val(data.from);
}

https://jsfiddle.net/k7stn10b/