Денис Кузьмин

Возможно на роутере стоит изоляция wifi клиентов что и предотвращает взаимодействие
А в интернет пинг проходит?

При соединении с БД надо указывать кодировку.
Поскольку на сайте используется юникод, то соответственно указывать надо utf8mb4

А сессии тут вообще не при чем.

document.querySelector('.form').addEventListener('input', e => {
  const data = Array.from(
    e.currentTarget.children,
    n => Array.from(n.querySelectorAll('input'), m => m.value)
  );

  document.querySelector('.total').innerText = Array
    .from(document.querySelectorAll('.row'))
    .reduce((acc, n, i) => {
      data[i].forEach((m, j) => n.children[j + 1].innerText = m);
      return acc + (+data[i].at(-1) || 0);
    }, 0);
});

или

const total = document.querySelector('.total');
const form = document.querySelector('.form');
const formRows = form.getElementsByClassName('d-flex');
const tableRows = document.getElementsByClassName('row');

form.addEventListener('input', ({ target: t }) => {
  const inputBox = t.closest('.input-box');
  const formRow = inputBox.parentNode;
  const iRow = Array.prototype.indexOf.call(formRows, formRow);
  const iCol = -~Array.prototype.indexOf.call(formRow.children, inputBox);

  tableRows[iRow].cells[iCol].textContent = t.value;

  if (iCol === formRow.children.length) {
    total.textContent = Array.prototype.reduce.call(
      formRows,
      (acc, n) => acc + (n.lastElementChild.children[0].value | 0),
      0
    );
  }
});

А что за задача-то решается? Нужен гибрид радиокнопки и чекбокса?

Вариант раз, радиокнопки:

let checked = null;

$('input').click(function() {
  checked = checked === this.value ? null : this.value;
  this.checked = !!checked;
});

// или

document.querySelectorAll('input').forEach(function(n) {
  n.addEventListener('click', this);
}, function({ target: t }) {
  t.checked = !!(this[0] = this[0] === t ? null : t);
}.bind([]));

Вариант два, с заменой радиокнопок чекбоксами:

const $checkboxes = $('input').change(function() {
  if (this.checked) {
    $checkboxes.not(this).prop('checked', false);
  }
});

// или

const checkboxes = document.querySelectorAll('input');
const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
checkboxes.forEach(n => n.addEventListener('change', onChange));

Вариант три - вместо того, чтобы изменять значение свойства checked вручную, добавьте ещё одну радиокнопку, которая будет обозначать отсутствие выбора.

Вот что бывает, когда бездумно копипастишь инструкции. Это даже в винде не проканывает, а уж в линухе - тем более.
vi - это и есть редактор. Но это редактор для настоящих хардкорщиков (его конечно знать надо, но пользоваться им - упаси Боже!). Поставьте что-либо более дружелюбное - nano, pico, mc в конце концов (для нуба лучше всего, да и для не нуба тоже зашибись идет)

надо открыть этот файл в редакторе и внести

Там уже есть директива server_names_hash_bucket_size. Надо комментарий (сомвол #) убрать, если он есть.

Как открыть этот файл в редакторе?

Так и открыть vi /etc/nginx/nginx.conf - vi это редактор.

В терминале появляется куча строк и надпись

Да, vi управляется командами

PS
Чтобы выйти из vi без сохранения - ESC затем : затем q! и Enter

Установить на VPS mc в из терминала
sudo apt install mc -y

далее в терминале наберите mc и работайте через него. для новичка это удобнее всего

vi /etc/nginx/nginx.conf в этой команде - vi это редактор. файл который надо редактировать это /etc/nginx/nginx.conf

редактор vi для новичка так же не особо удобен. делайте через mc

dop_img:hover {z-index: -1}

$('.filter').change(({ target: t }) => {
  $(`[name="${$(t).closest('.button').data('size')}"]`)
    .closest('.product-box')
    .toggleClass('hidden', !t.checked);
}).find(':checked').change();

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

const filter = document.querySelector('.filter');

filter.addEventListener('change', ({ target: t }) => {
  const size = t.closest('.button').dataset.size;
  document.querySelectorAll(`[name="${size}"]`).forEach(n => {
    n.closest('.product-box').classList.toggle('hidden', !t.checked);
  });
});

filter.querySelectorAll(':checked').forEach(n => {
  n.dispatchEvent(new Event('change', { bubbles: true }));
});

Два класса не нужно - уберите closed, пусть элементы по умолчанию будут скрыты:

- .box.closed .list {
-   display: none;
- }
+ .box .list {
+   display: none;
+ }
+ .box.opened .list {
+   display: block;
+ }

Так что переключать будем только класс opened. А чтобы снять класс у соседей, надо будет подняться до общего предка, и найти внутри него нужные элементы. Есть несколько вариантов:

const containerSelector = '.section';
const itemSelector = '.box';
const buttonSelector = '.control-label';
const activeClass = 'opened';


// jquery, как вы и хотели
$(itemSelector).on('click', buttonSelector, ({ delegateTarget: t }) => $(t)
  .toggleClass(activeClass)
  .closest(containerSelector)
  .find(itemSelector)
  .not(t)
  .removeClass(activeClass)
);

// или, к чёрту jquery;
// вешаем обработчик клика на каждый заголовок
const onClick = ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove'](activeClass);
  }, t.closest(itemSelector));

document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

// или, добавляем обработчик клика один раз для всех
document.addEventListener('click', ({ target: t }) => t
  .closest(buttonSelector)
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector)
  .forEach(n => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass))
);

$('.section .box .control-label').not($this).removeClass('opened');

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

$('.close').on('click', function (e) {
  e.stopPropagation(); // вот так
  $('.section').removeClass('opened');
});

или stopImmediatePropagation, если в вашем случае первое не сработает

Брехня, всё срабатывает.

Бегом гуглить, что такое всплытие событий.

Надо его останавливать:

const $section = $('.section').on('click', () => $section.addClass('opened'));
$section.find('.close').on('click', e => {
  e.stopPropagation();
  $section.removeClass('opened');
});

// или

const section = document.querySelector('.section');

section.addEventListener('click', () => section.classList.add('opened'));
section.querySelector('.close').addEventListener('click', e => (
  e.stopPropagation(),
  section.classList.remove('opened')
));

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

const $section = $('section').click(e => {
  $section.toggleClass('opened', !$(e.target).is('.close'));
});

// или

document.querySelector('.section').addEventListener('click', e => {
  e.currentTarget.classList.toggle('opened', !e.target.matches('.close'));
});

https://jsfiddle.net/7ekjafbq/1/
А почему бы не пользоваться тем, что это почти форма ? Добавить в контролы имена, значения и пользоваться почти штатной сериализацией.

Вычисляйте всю сумму заново при любых изменениях:

const BASE_VALUE = 100;

document.querySelector('.container').addEventListener('change', e => {
  document.querySelector('.total').innerText = Array
    .from(e.currentTarget.querySelectorAll('input:checked'))
    .reduce((acc, n) => acc + +n.value, BASE_VALUE);
});

https://jsfiddle.net/khjn5teo/

Думаю вам поможет for...in