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

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

Вариант раз:

let checked = null;

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

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

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

Вот что бывает, когда бездумно копипастишь инструкции. Это даже в винде не проканывает, а уж в линухе - тем более.
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();

$('.section').on('click', '.control-label', function() {
  $(this)
    .closest('.box')
    .toggleClass('opened')
    .siblings()
    .removeClass('opened');
});

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

.box .list {
  display: none;
}
.box.opened .list {
  display: block;
}

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

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

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

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

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

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

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

https://jsfiddle.net/khjn5teo/

$('.indicator').toggleClass('disabled', this.value.endsWith('x190'));

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

[data-option-value$="из дуба"] {
  background: yellow;
}

$('[data-option-value$="из дуба"]').css('outline', 'dashed 2px red');

Поясню
Есть родительский элемент
Есть два внутренних элемента

У родителя нету нижнего border'а его мы формируем за счёт псевдоэлемента - если бордер 4px то и высота after тоже 4px

например вот-так

Привяжите контекст (по аналогии с методами swipeStatus и keyboardHandler):

this.previousImage = this.previousImage.bind(this);
this.nextImage = this.nextImage.bind(this);

Исправьте поиск кнопок (они находятся на одном уровне с контейнером слайдов, от которого вы пляшете, так что сначала надо подняться на уровень выше или вместо find использовать siblings; и селекторы ещё неправильные):

this.prevBtn = this.slider.siblings(".slider-btn.previous");
this.nextBtn = this.slider.siblings(".slider-btn.next");