0xD34F

проблема в том, что при клике по какому-либо элементу подМЕНЮ, первый, элемент который задавался по умолчанию не сбрасывает стиль

Всё-таки стиль сбрасывается. А потом снова устанавливается. Потому что из-за всплытия события срабатывает обработчик клика основного меню. Отменяйте всплытие в обработчике клика подменю, и всё будет OK:

$('ul#topnav li span a').click(function(e) {
  e.stopPropagation();
  ...

Потому что клик на лейбл вызывает клик на инпуте (так лейблы устроены, могут вызывать клик на других элементах), а так как инпут находится внутри лейбла, событие при всплытии заставляет обработчик клика сработать ещё раз.

Какие есть варианты исправить ситуацию:

1. Вешайте обработчик клика на инпут вместо лейбла
   
2. Проверяйте целевой элемент, если не инпут - ничего делать не надо
   
3. Обрабатывайте вместо click событие change
   

const [ key ] = Object
  .entries(data)
  .reduce((max, [ k, { Number_of_Something: v } ]) => {
    return max[1] > v ? max : [ k, v ];
  }, [ null, -Infinity ]);

или

const key = (Object
  .entries(data)
  .sort((a, b) => b[1].Number_of_Something - a[1].Number_of_Something)
  .shift() || [ null ])
  .shift();

или

let key = null;
let max = -Infinity;
for (const k in data) {
  if (data.hasOwnProperty(k) && data[k].Number_of_Something > max) {
    key = k;
    max = data[k].Number_of_Something;
  }
}

или

const max = Math.max(...Object.values(data).map(n => n.Number_of_Something));
const key = Object.keys(data).find(k => data[k].Number_of_Something === max) || null;

<div class="out"></div>
<button class="btn">click me</button>

const images = [ '...', '...', /* ... */ ];
const SHOW_MORE = 2;

document.querySelector('.btn').addEventListener('click', e => {
  document.querySelector('.out').insertAdjacentHTML('beforeend', images
    .splice(0, SHOW_MORE)
    .map(n => `<div class="outImg"><img src="${n}"></div>`)
    .join('')
  );

  e.target.disabled = !images.length;
});

$('ur_login')

Круто. Новый тэг появился.

$('ur_password')

Два новых тэга.

только начал учить AJAX и PDO

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

success: (data) => {
  $(this).toggleClass('like-active like_click').find('.like_count').html(data);
},

Вариант раз - вызвать у элемента метод click: checkbox.click();.

Вариант два - установить новое значение checked и отправить элементу событие change:

checkbox.checked = /* сюда пишем true или false */;
checkbox.dispatchEvent(new Event('change'));

1. eval
   
2. рекурсивный спуск
   
3. откажитесь от выражений, и имитируйте реальный карманный калькулятор - при нажатии на сложение/умножение/... текущее число запоминается, выбранная операция запоминается, поле ввода очищается (или, если уже есть ранее запомненные число и операция, производится соответствующее вычисление и вывод результата)
   

О какой таблице идёт речь:

const table = document.querySelector('.table-price table');

Для выделения используем классы:

.highlight-min {
  color: green;
  font-weight: bold;
}

.highlight-max {
  color: red;
  font-weight: bold;
}

Находим минимум:

table.querySelectorAll('tr').forEach(n => {
  const td = Array
    .from(n.querySelectorAll('td:not(.logo-table)'), m => [ m, +m.innerText.match(/\d+/) ])
    .sort((a, b) => a[1] - b[1])[0][0];

  td.classList.add('highlight-min');
});

Но что если искомое значение представлено в нескольких экземплярах? Выделяем все максимумы:

for (const { cells: [ , ...cells ] } of table.rows) {
  const [ tds ] = cells.reduce((max, n) => {
    const val = parseInt(n.textContent);
    if (val > max[1]) {
      max = [ [], val ];
    }
    if (val === max[1]) {
      max[0].push(n);
    }
    return max;
  }, [ [], -Infinity ]);

  tds.forEach(n => n.classList.add('highlight-max'));
}

https://jsfiddle.net/72msenta/

const className = 'класс элементов, чьи id вам надо получить';

Как получить элементы, зная их класс:

const elems = document.querySelectorAll(`.${className}`);
// или
const elems = document.getElementsByClassName(className);

Как извлечь из элемента его id:

const getId = el => el.id;
// или
const getId = el => el.getAttribute('id');
// или
const getId = el => el.attributes.id.value;

Как собрать массив id:

const ids = Array.from(elems, getId);

// или

const ids = Array.prototype.map.call(elems, getId);

// или

const ids = [];
for (const n of elems) {
  ids.push(getId(n));
}

// или

const ids = [];
for (let i = 0; i < elems.length; i++) {
  ids[i] = getId(elems[i]);
}

// или

const ids = (function get(i, n = elems.item(i)) {
  return n ? [ getId(n), ...get(i + 1) ] : [];
})(0);

const result = Object.values(arr.reduce((acc, n) => (
  acc[n.id] = n.checked ? n : (acc[n.id] || n),
  acc
), {}));

или, с сохранением порядка:

const result = arr.reduce((acc, n) => {
  const i = acc.findIndex(m => m.id === n.id);
  if (!~i || (!acc[i].checked && n.checked)) {
    acc.push(n);
    if (~i) {
      acc.splice(i, 1);
    }
  }
  return acc;
}, []);

// или

const result = Object
  .values(arr.reduce((acc, n, i) => (
    (!acc[n.id] || (!acc[n.id][0].checked && n.checked)) && (acc[n.id] = [ n, i ]),
    acc
  ), {}))
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

О каких элементах идёт речь:

const elements = document.querySelectorAll('.buy');

Как добраться до текста внутри элемента:

const getText = el => el.querySelector(':scope > i').textContent;

// или

const getText = el => el.children[0].innerText;

Скрываем дубликаты:

[...elements].forEach((n, i, a) => {
  n.style.display = n === a.find(m => getText(m) === getText(n))
    ? 'block'
    : 'none';
});

или

const grouped = Array
  .from(elements, n => [ n, getText(n) ])
  .reduce((acc, n) => ((acc[n[1]] = acc[n[1]] || []).push(n[0]), acc), {});

Object.values(grouped).forEach(n => n.forEach((m, i) => m.hidden = !!i));

или

.hidden {
  display: none;
}

elements.forEach(function(n) {
  const t = getText(n);
  n.classList.toggle('hidden', this.has(t) || !this.add(t));
}, new Set);

people.filter((n, i, a) => n.country && i === a.findIndex(m => m.country === n.country))

или

people.filter(n => n.country && n === people.find(m => m.country === n.country))

или

people.filter(function({ country: n }) {
  return n && !(this[n] = this.hasOwnProperty(n));
}, {})

или

Object.values(people.reduce((acc, n) => (n.country && (acc[n.country] = n), acc), {}))

или

[...people.reduce((acc, n) => n.country ? acc.set(n.country, n) : acc, new Map).values()]

или

Array.from(
  new Set(people.map(n => n.country).filter(Boolean)),
  n => people.find(m => m.country === n)
)

const block = document.querySelector('.block');
const inputSelector = 'input[type="number"]';

const toggleBlock = () =>
  block.style.display = Array
    .from(document.querySelectorAll(inputSelector))
    .some(n => n.value && +n.value > +n.min)
      ? 'block'
      : 'none';

document.addEventListener('input', e => e.target.matches(inputSelector) && toggleBlock());
toggleBlock();

// или

const inputs = document.querySelectorAll(inputSelector);
const toggleBlock = () =>
  block.hidden = Array.prototype.every.call(
    inputs,
    n => !n.value || +n.value <= +n.min
  );

inputs.forEach(n => n.addEventListener('input', toggleBlock));
toggleBlock();

if ( typeof arr[i] === 'number' ) {
 		x*= arr[i];

А что если arr[i + 1] окажется строкой? Сначала надо проверить всё, а уже потом вычислять (если потребуется) объединённое значение.

Вариант раз - перебираем массив отдельно для каждого из проверяемых типов данных:

function bullshit(arr) {
  if (arr.length) {
    if (arr.every(n => n === `${n}`)) {
      return ''.concat(...arr);
    }

    if (arr.every(n => n === +n)) {
      return eval(arr.join('*'));
    }
  }

  return null;
}

Вариант два - считаем, сколько значений каких типов есть в массиве:

function bullshit(arr) {
  const count = arr.reduce((acc, n) => {
    const type = typeof n;
    acc[type] = (acc[type] || 0) + 1;
    return acc;
  }, {});

  switch (arr.length) {
    case count.string: return arr.join('');
    case count.number: return arr.reduce((acc, n) => acc * n, 1);
    default: return null;
  }
}

const result = Object
  .entries(obj)
  .sort((a, b) => a[0] - b[0])
  .reduce((acc, [ k, v ], i, a) => (
    i && !(-~a[~-i][0] - k) || (acc[0][acc[1] = k] = 0),
    acc[0][acc[1]] += v,
    acc
  ), [ {} ])[0];

const result = obj.people.filter(function(n) {
  return n.data && this.some(m => m.every(([ k, v ]) => n.data[k] === v));
}, arr.map(Object.entries));

Получаем один класс:

const className = Array
  .from(element.classList)
  .find(n => n.startsWith(classNamePrefix));

Получаем все, что есть:

const classNames = Array.prototype.filter.call(
  element.classList,
  n => !n.indexOf(classNamePrefix)
);

$('.wrap').on('input', function(e) {
  const valid = $(this).find('.valid').get().map(el => {
    if (el === e.target) {
      $(el).toggleClass('empty', !el.value);
    }

    return el.value;
  }).every(Boolean);

  $('.btn')
    .toggleClass('btn--isvalid', valid)
    .toggleClass('btn--novalid', !valid);
});

После подключения обработчиков событий, генерируйте само событие, типа $('.form-group').trigger('input').