0xD34F

Добавьте return this в конец каждого метода.

Задать элементу transition:

.item {
  transition: transform 1s;
}

Определить класс, который будет задавать смещение:

.move {
  transform: translateY(150px);
}

Переключать класс при клике:

$(document).on('click', '.item', function() {
  $(this).toggleClass('move');
});

https://jsfiddle.net/rx2tgc0m/

ИЛИ

Можно обойтись без js - перед элементом прячем чекбокс; сам элемент делаем label'ом, который будет переключать состояние этого чекбокса; смещаем элемент, если перед ним находится отмеченный чекбокс:

<input type="checkbox" id="xxx">
<label class="item" for="xxx">
  ...

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .item {
  transform: translateY(150px);
}

https://jsfiddle.net/56y7vwjd/

Есть такая штука - делегирование называется.

Пример с добавлением новых элементов.

Так?

<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(arr, idKey, parentKey) {
  const tree = {};
  arr.forEach(n => tree[n[idKey]] = Object.assign({}, n));

  return Object.values(tree).reduce((acc, n) => {
    const parent = tree[n[parentKey]];
    (parent ? parent.children = parent.children || {} : acc)[n[idKey]] = n;
    return acc;
  }, {});
}


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

$('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) {
  select.appendChild(document.createElement('option'));
  select.lastChild.text = n;
}

// или

for (let i = 0; i < arr.length; i++) {
  const option = document.createElement('option');
  option.textContent = arr[i];
  select.insertAdjacentElement('beforeend', option);
}

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