0xD34F

А зачем двигаться "пошагово"? Известны же координаты кнопок - можно вычитать одни из других, и сразу получать количество шагов:

const keyboard = [
  'abcde123',
  'fghij456',
  'klmno789',
  'pqrst.@0',
  'uvwxyz_/',
].reduce((acc, [...row], iRow) => {
  row.forEach((key, iCol) => acc[key] = [ iRow, iCol ]);
  return acc;
}, {});

function tvRemote(word) {
  let steps = word.length;
  let prev = [ 0, 0 ];

  for (const n of word) {
    const curr = keyboard[n];
    steps += Math.abs(prev[0] - curr[0]) + Math.abs(prev[1] - curr[1]);
    prev = curr;
  }

  return steps;
}

Сделать делегированный обработчик клика, в котором проверять, где случилось событие. Если кнопка - значит, надо открыть окно. Если корневой элемент окна или .close - наоборот, закрыть.

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');

document.addEventListener('click', function(e) {
  if (e.target === modal || e.target === close) {
    modal.style.display = 'none';
  }

  if (e.target.tagName === 'BUTTON') {
    modal.style.display = 'block';
  }
});

Вместо pageX и pageY используйте clientX и clientY.

Что если пользователь введёт значение, которое нельзя привести к числу? Получите NaN, этот случай у вас никак не обрабатывается.

Результат повторного ввода в переменную count не записывается, если первый раз ввели некорректное значение, то оно там так и останется.

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

let count = null;
while (1) {
  count = prompt('Введите количество колонок для таблицы умножения') | 0;
  if (count > 0) {
    break;
  }
  alert('Введите корректное число');
}

lat + x != 11

lon + y != 11

А 10, стало быть, является допустимым значением, да? И это значение вы используете в качестве индекса массива, чей размер - тоже 10. Толково придумано, ничего не скажешь.

const decodeMorse = code => code
  .trim()
  .split('   ')
  .map(n => n.split(' ').map(m => MORSE_CODE[m]).join(''))
  .join(' ');

или

const decodeMorse = code => code
  .trim()
  .replace(/\S+ ?/g, m => MORSE_CODE[m.trim()])
  .replace(/  /g, ' ');

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

const itemSelector = '.item';
const activeClass = 'active';
const maxActive = 3;
const onMaxActiveClick = () => alert(`больше ${maxActive} нельзя`);


// делегирование, назначаем обработчик клика один раз для всех элементов
document.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const active = document.querySelectorAll(`${itemSelector}.${activeClass}`);
    if (active.length < maxActive || item.classList.contains(activeClass)) {
      item.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});

// или, назначаем обработчик клика каждому элементу индивидуально
let activeCount = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  activeCount += n.classList.contains(activeClass);
}

function onClick({ currentTarget: item }) {
  if (activeCount < maxActive || item.classList.contains(activeClass)) {
    activeCount += item.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

Кажется, кто-то не в курсе, что индексация массивов начинается с нуля.

Ну нет у вас ни в одном из массивов элемента с индексом 10, нет. Соответственно, когда lon принимает значение 10, map[lon] оказывается undefined, отсюда и ошибка.

Делегируйте обработку событий, и тогда не придётся беспокоиться о пропавших обработчиках. Как-то так.

const getCheckedValues = elements =>
  [...elements].reduce((acc, n) => (
    n.checked && (acc[n.name] = acc[n.name] || []).push(n.value),
    acc
  ), {});

Если пустые группы тоже должны присутствовать, то

const getCheckedValues = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, { name, value, checked }) => (
      acc[name] = acc[name] || [],
      checked && acc[name].push(value),
      acc
    ),
    {}
  );

const numbers = (string.match(/-?\d+(\.\d+)?/g) || []).map(Number);

[Symbol.iterator]() {
  let curr = this.head;

  return {
    next() {
      if (curr) {
        const item = curr;
        curr = curr.next;
        return {
          done: false,
          value: item,
        };
      } else {
        return {
          done: true,
        };
      }
    },
  };
},

Получается, что объявляем две переменных <...> То есть это равносильно

Не получается, не равносильно. Объявляется одна переменная. Вторая - выполняется лишь присваивание. И если - ВНИМАНИЕ - переменной с таким именем нет в текущей области видимости, будет выполнено присваивание переменной из внешней области видимости. Это, как нетрудно понять, отличный источник потенциальных багов (переменная, которую вроде бы никто не трогал, внезапно своё значение изменила). Ну а если такой переменной ни в одной из внешних областей видимости нет, будет создана глобальная переменная.

Короче, подобный код - безграмотный (а в строгом режиме, при отсутствии второй переменной в какой-либо из доступных областей видимости - и вовсе нерабочий, упадёт с ошибкой).

const obj = arr.reduce((max, n) => {
  const val = Object.values(n)[0];
  return val > max[1] ? [ n, val ] : max;
}, [ null, -Infinity ])[0];

Что не так делаю?

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

let uploadTo = null;

$('.file-upload-preview').click(function() {
  uploadTo = this;
  $('#file-upload').click();
});

Соответственно, внутри обработчика change заменяете $(".file-upload-preview") на $(uploadTo).

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

const inputSelector = '.hidden_field';
const itemSelector = '.item';
const activeClass = 'active';


// как это может выглядеть с использованием jquery
const $items = $(itemSelector).click(function() {
  $(this).toggleClass(activeClass);
  $(inputSelector).val($items
    .filter(`.${activeClass}`)
    .get()
    .map(n => $(n).text())
    .join(', ')
  );
});

// или, к чёрту jquery
const items = [...document.querySelectorAll(itemSelector)];
items.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.classList.toggle(activeClass);
  document.querySelector(inputSelector).value = items
    .filter(n => n.classList.contains(activeClass))
    .map(n => n.innerText)
    .join(', ');
}

const result = Object.entries(commonObj).map(([ k, v ]) => ({
  objDataName: (objectData.find(n => n.key === k) || {}).name || null,
  packageName: (packageData.find(n => n.id === v.package_id) || {}).title || null,
}));

или

const arrToObj = (arr, key, val) =>
  arr.reduce((acc, n) => (acc[n[key]] = n[val], acc), {});

const objects = arrToObj(objectData, 'key', 'name');
const packages = arrToObj(packageData, 'id', 'title');

const result = Object.entries(commonObj).map(n => ({
  objDataName: objects[n[0]] || null,
  packageName: packages[n[1].package_id] || null,
}));

for (let i = 0; i < 6; i++) {
  const count = res.data.filter(n => +n.categoryid === i).length;
  $(`#category_count_${i}`).html(`(${count})`);
}

document.addEventListener('click', e => {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    link.style.display = 'none';
    setTimeout(() => window.location = link.href, 2000);
  }
});

Установка свойства checked не приводит к возникновению события change, так что его следует создавать самостоятельно - добавьте .trigger('change') после вызова prop.