Сергей delphinpro

obj - это объект.
К полям объекта можно обращаться через точку или квадратные скобки

например

const obj = { prop: 123 }

// Это два одинаковых выражения
obj.prop // 123
obj['prop'] // 123

Строка 'prop' тоже может быть переменной

const obj = { prop: 123 }
const name = 'prop';
obj[name] // 123

Круглые скобки - это вызов функции.
Функция может содержаться в переменной

const my_func = function() {}
// чтобы ее вызвать
my_func();

И все это может комбинироваться.
Функция может быть частью объекта

const obj = {
  my_func: function(){}
}

Может передаваться в объект через переменную

const my_other_func = function() {}
const obj = {
  my_func: my_other_func
}

И может быть вызвана
при обращении к свойству объекта через точку
obj.my_func()
при обращении к свойству объекта через квадратные скобки

obj['my_func']()
// или
const name = 'my_func';
obj[name]()

Как минимум, в коде не видно подключения jquery

https://codepen.io/delphinpro/pen/bGjpKWY
https://codepen.io/delphinpro/pen/BEZgwR

Можно просто использовать переменную в замыкании

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
     button.toggleClass('active');
  });
});

Ну или референс из события

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', event => {
     event.target.toggleClass('active');
     // Или так, если есть вложенные элементы
     // event.target.closest('.button').toggleClass('active');
  });
});

const pName = prompt('Введите имя первого человека');
const pAge = prompt('Введите возраст первого человека');
const secName = prompt('Введите имя второго человека');
const secAge = prompt('Введите возраст второго человека');

const person1 = new Person(pName, pAge);
const person2 = new Person(secName, secAge);

const car1 = new Car('sedan', 'petrol','rear brakes','hunday', [person1]); 
const car2 = new Car('van', 'diesel', 'rear brakes','nisan', [person1, person2]);

const garag1 = new Garag ('Cindy', '2 Cars', [person1], [car1,car2]);
const garag2 = new Garag ('Jon', '1 Cars', [person2], [car2]);

console.log(garag1,person1,car1,car2);

Поменяйте пару событий mouseover/mouseout на mouseenter/mouseleave

Заменить див на кнопку (потому что по сути – это кнопка) и дисейблить ее по клику.

https://codepen.io/delphinpro/pen/BEZgwR

Http Basic Authentification
Настраивается на сервере. Вызывается браузером автоматически, если сервер требует такую аутентификацию.
Для php https://www.php.net/manual/ru/features.http-auth.php

Делайте делегирование правильно https://qna.habr.com/q/1235504

const o = e.target.closest('.blog__item')

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

в php return на echo замените

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    Array.from(new Set(duplicateArray))
);

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    duplicateArray.reduce(function (carry, item) {
        if (!carry.includes(item)) carry.push(item);
        return carry;
    }, [])
);

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    [...duplicateArray.reduce((carry, item) => [...carry].includes(item) ? carry : carry + item, '')]
);

Можете.

var model = '<?=$_GET['model']?>';

Если блоков будет несколько, то кнопка будет открывать только первый.
Нужно сделать связь между ними

<button class="open" data-target="b1">Open1</button>
<button class="open" data-target="b2">Open2</button>
<div class="hidden-block" id="b1">
  <ul>
    <li>Первый</li>
  </ul>
  <button class="close">Close</button>
</div>
<div class="hidden-block" id="b2">
  <ul>
    <li>Второй</li>
  </ul>
  <button class="close">Close</button>
</div>

// 1. Константа, значение не меняется
// 2. Это кнопка, а не блок (название фиговое)
// 3. Их может быть несколько на странице
const openButtons = document.querySelectorAll('.open');

// Закрывашка находится внутри блока, поэтому искать ее нужно именно внутри блока
// чтобы она закрывала только свой блок. Это выкидываем
// let backBlock = document.querySelector('.close');

// Вешаем клики на все открывашки
openButtons.forEach(btn => {
  btn.addEventListener('click', e => {  
    // дергаем ID из data-атрибута
    const targetId = e.target.dataset.target;
    document.getElementById(targetId).classList.add('open-hidden-block');
  });
});

// Перебираем все блоки и ищем в них закрывашки
document.querySelectorAll('.hidden-block').forEach(block => {
  const closer = block.querySelector('.close');
  closer.addEventListener('click', () => {
    block.classList.remove('open-hidden-block');
  });
});

timeout = setTimeout( () => fn.apply(this, arguments), debounceTime );