0xD34F

Где элементы находятся, что за элементы, какой класс будем добавлять/удалять:

const containerSelector = 'ul';
const itemSelector = 'li';
const activeClass = 'active';

Хотели на jquery? - ну типа вот:

const $containers = $(containerSelector).on('click', itemSelector, function(e) {
  const index = $(itemSelector, e.delegateTarget).index(this);
  $containers.find(`${itemSelector}.${activeClass}`).removeClass(activeClass);
  $containers.find(`${itemSelector}:eq(${index})`).addClass(activeClass);
});

Или, к чёрту jquery:

const containers = document.querySelectorAll(containerSelector);
containers.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const items = this.querySelectorAll(itemSelector);
    const index = Array.prototype.indexOf.call(items, item);
    containers.forEach(container => {
      container.querySelectorAll(itemSelector).forEach((n, i) => {
        n.classList.toggle(activeClass, i === index);
      })
    });
  }
}

Первые ячейки - у которых левая граница минимальна. Последние - у которых правая (левая граница + ширина) максимальна. Можно их найти и добавить какой-нибудь класс:

const td = [...document.querySelectorAll('table td')];
const first = td[0].offsetLeft;
const last = Math.max(...td.map(n => n.offsetLeft + n.offsetWidth));

td.forEach(n => (
  (n.offsetLeft === first) && n.classList.add('first'),
  (n.offsetLeft + n.offsetWidth === last) && n.classList.add('last')
));

const newArr = arr.reduce((acc, n) => (
  acc[n.month - 1] = n.sum,
  acc
), Array(12).fill(''));

или

const newArr = Array.from({ length: 12 }, function(_, i) {
  return this[-~i] || '';
}, Object.fromEntries(arr.map(n => [ n.month, n.sum ])));

или

const newArr = [];
for (let i = 0, j = 0; i < 12; i++) {
  newArr.push((arr[j] || {}).month === i + 1 ? arr[j++].sum : '');
}

Во-первых, nextStep.nextElementSibling - это никакой не блок аккордеона. Во-вторых, условие кривое - открываете блок, если он не следующий (!==) и закрыт, т.е., открываете все, кроме закрываемого.

document.addEventListener('click', e => {
  const t = e.target;
  const heading = t.closest('.panel-heading');
  const nextStep = t.closest('.construct-btn');
  const collapse = 
    heading  ? heading.nextElementSibling :
    nextStep ? t.closest('.panel').nextElementSibling.querySelector('.panel-collapse') :
               null;

  if (collapse) {
    e.preventDefault();
    t.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === collapse ? 'toggle' : 'remove']('in');
    });
  }
});

document.querySelector('.add-sentence-btn').addEventListener('click', ({ target: t }) => {
  t.closest('.row').querySelectorAll('.hidden').forEach(n => n.classList.remove('hidden'));
  t.classList.add('hidden');
});

можно

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

UPD.

function addClickListeners(buttonsSelector, dialogSelector) {
  const buttons = document.querySelectorAll(buttonsSelector);
  const dialog = document.querySelector(dialogSelector);

  buttons.forEach(n => n.addEventListener('click', e => {
    e.preventDefault();
    dialog.style.display = 'block';
  }));

  dialog.addEventListener('click', ({ target }) => {
    if (target.classList.contains('popup-close')) {
      document.getElementById('name_1').disabled = true;
      document.getElementById('phone_1').disabled = true;
      dialog.style.display = 'none';
    } else if (!target.closest('.popup-content')) {
      dialog.style.display = 'none';
    }
  });
}


addClickListeners('header .contacts a', '.popup-call');
addClickListeners('.sentence-btn', '.popup-discount');
addClickListeners('.check-btn', '.popup-check');

document.addEventListener('click', function(e) {
  const heading = e.target.closest('.panel-heading');
  if (heading) {
    e.preventDefault();
    heading.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === heading.nextElementSibling ? 'toggle' : 'remove']('in');
    });
  }
});

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}

// ваш случай
diff(array1, array2, 'name')

// есть и другие варианты применения
diff([ 1, 2, 3, 4, 5 ], [ 1, 2, 3 ]) // [4, 5]
diff('abcde', 'ACE', n => n.toLowerCase()) // ['b', 'd']

document.querySelector('input').addEventListener('change', e => {
  const { files: [ file ] } = e.target;
  if (file) {
    const reader = new FileReader();
    reader.onload = e => document.querySelector('img').src = e.target.result;
    reader.readAsDataURL(file);
  }
});

$('.all-blocks.color-blocks .block').attr('id', function(i, id) {
  return $(this).hasClass(id) ? `${id}_2` : id;
});

или

document.querySelectorAll('.all-blocks.color-blocks .block').forEach(n => {
  n.id += n.classList.contains(n.id) ? '_2' : '';
});

.active .block {
  border: 1px solid red;
  color: red;
}

.active .under-box-text {
  display: none;
}

.active .invisible {
  display: block;
}

const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';

$(itemSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

// или

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    this.classList.toggle(activeClass);
  }
}

// или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const item = button && button.closest(itemSelector);
  item && item.classList.toggle(activeClass);
});

запрос_1()
  .then(результат_1 => Promise
    .all(результат_1.map(запрос_2))
    .then(результат_2 => результат_1.map((значение_1, i) => ({
      значение_1: значение_1,
      значение_2: результат_2[i],
    })))
  )
  .then(console.log)

Надо сделать объект - ключами будут языки, значениями массивы дней недели:

const getDayName = (day, lang) => (({
  en: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
  ru: [ 'Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ],
})[lang] || [])[day - (7 * Math.floor(day / 7))];


getDayName(5, 'en') // 'Friday'
getDayName(7, 'ru') // 'Воскресенье'
getDayName(-19, 'ru') // 'Вторник'
getDayName(4, 'fr') // undefined

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

const getDayName = (day, lang) =>
  new Date(2001, 0, ((day % 7) + 7) % 7).toLocaleString(lang, { weekday: 'long' });


getDayName(4, 'fr') // 'jeudi'
getDayName(36, 'de') // 'Montag'

// можно посмотреть количество ключей
const isEmpty = x => !Object.keys(x || {}).length;

// или перебирать свойства, пока не встретится собственное
function isEmpty(x) {
  for (const k in x) if (x.hasOwnProperty(k)) {
    return false;
  }

  return true;
}

isEmpty() // true
isEmpty(null) // true
isEmpty(666) // true
isEmpty('') // true
isEmpty([]) // true
isEmpty({}) // true

isEmpty([ 187 ]) // false
isEmpty({ xxx: 69 }) // false
isEmpty('hello, world!!') // false

Если результат выполнения commit нужен, тогда так:

await Promise.all([ one(), query().then(commit) ])

Если не нужен:

await Promise.all([ one(), query().then(r => (commit(), r)) ])

const data = Array.from(
  document.querySelectorAll('.bigDiv'),
  n => Array.from(n.querySelectorAll('.smallDiv'), m => m.innerText)
);

или

const data = [];

for (const n of document.getElementsByClassName('bigDiv')) {
  data.push([]);

  for (const m of n.children) {
    data[data.length - 1].push(m.innerHTML);
  }
}

или

const data = Array.prototype.reduce.call(
  document.getElementsByClassName('smallDiv'),
  (acc, n) => (
    n.previousElementSibling || acc.push([]),
    acc[~-acc.length].push(n.textContent),
    acc
  ),
  []
);

.hidden {
  display: none;
}

const checkbox = document.querySelector('.block50 input');
const block = document.querySelector('.block83');
const onChange = e => block.classList.toggle('hidden', !e.target.checked);
checkbox.addEventListener('change', onChange);

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

список скрывается только после того, когда поставишь и уберешь галочку

Добавляем класс элементу:

<div class="block83 hidden">

Или отправляем ему событие change, чтобы обработчик сработал и класс добавил:

checkbox.dispatchEvent(new Event('change'));

UPD. Наконец-то дождались, теперь js тут использовать не обязательно:

body:not(:has(.block50 :checked)) .block83 {
  display: none;
}

document.querySelector('#myselect').addEventListener('change', function(e) {
  const select = this;
  // или
  // const select = e.target;
  // const select = e.currentTarget;

  const [ option ] = select.selectedOptions;
  // или
  // const option = select[select.selectedIndex];
  // const option = select.querySelector(`[value="${select.value}"]`);
  // const option = select.querySelector('option:checked');
  // const option = [...select.children].find(n => n.selected);

  const forAttr = option.getAttribute('for');
  // или
  // const forAttr = option.attributes.for.value;

  document.querySelector('#mydiv').innerText = `Вес брутто*: ${forAttr}`;
});

Где...

Здесь.

...или как

Изучить js, хоть немного - тогда переписать самостоятельно труда не составит.

Данные - вместо объекта сделайте массив, так будет проще работать.

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

Сделайте функцию, которая будет выводить список товаров - но не весь, а те, что ей будут переданы.

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

На блок с фильтрами вешаете функцию фильтрации в качестве обработчика событий, возникающих после взаимодействия пользователя с фильтрами.

Всё.