nowm

Если работает тогда не трогай

Ну это рынок, всх хотят кушать, фрилансер не будет пол года ждать того что от вас может прилететь, а может и не прилететь, заказ на 40 часов.
Поэтому весь мир уже давно разделился на "подписчиков" и "проектников".
Если нужна периодическая работа, то заключаете договор в рамках которого исполнитель резервирует под вас +/- определенное количество времени которое вы можете в течении месяца выбирать, либо, по аналогии с ТК, оплатить работнику простой.
Если нужна разовая работа, то выкатывайте ТЗ и ждите кто из "проектников" свободный откликнется, чтобы полностью окунуться в вашу задачу.
ПОэтому анализируйте рынок и считайте что выгоднее: дробить задачи чтобы укладываться в +/- 10ч в месяц и иметь постоянного человека у которого эти 10ч заложены в график и который уже зная архитектуру и состояние вашего проекта быстро все сделает. Или на каждую разовую задачу нанимать нового специалиста и доплачивать каждый раз 5-10ч за "вливание в проект", потому как, да, "проектник" сейчас сидит на аналогичном вашему 40часовике и на следующую неделю уже согласовал другой 40часовик, и Ваш, соответственно сможет взять только в конце месяца, если че выгодней не подвернется.

Дата не меняется, просто Вы оперируете датой в текущем часовом поясе (Московское время), а в консоль логируется в формате UTCString, а в UTC всегда используется время по Лондону.

Ну и у строки нет метода setHours, нужно сначала создавать объект Date и уже на нем вызывать этот метод. Хотя для даты сделаной из такой строки этот вызов бессмысленный, так как устанавливаемые параметры и так будут 0

А почему бы не использовать просто data-атрибут как селектор?

.class {
 &[data-color="red"] {
    // some code...
  }
}

Но если сильно надо, то

const elements = document.querySelectorAll('[data-color]');

elements.forEach(el => el.classList.add(el.dataset.color));

Ошибка в коде в том, что при вызове filter.update.country() this является объект update, а не filter.

JS код, идентичный коду на Java:

class Filter {
    static sex = null;
    static player = null;
    static country = null;

    static updateSex() {
        Filter.sex = document.querySelector("#sex").value;
    }
    static updatePlayer() {
        Filter.player = document.querySelector("#player").value;
    }
    static updateCountry() {
        Filter.country = document.querySelector("#country").value;
    }
}

Filter.updatePlayer();
console.log(Filter.player);

или

class Filter {
    constructor() {
        this.sex = null;
        this.player = null;
        this.country = null;
    }

    updateSex() {
        this.sex = document.querySelector("#sex").value;
    }
    updatePlayer() {
        this.player = document.querySelector("#player").value;
    }
    updateCountry() {
        this.country = document.querySelector("#country").value;
    }
}

const filter = new Filter();
filter.updateCountry();
console.log(filter.country);

Ну и рабочий аналог "кода" из вопроса:

class Filter {
    fields = {
        country: null,
    }
    update = {
        caller: this,
        country() {
            this.caller.fields.country = "123";
        }
    }
}
const filter = new Filter();
filter.update.country();
console.log(filter.fields.country);

Достаточно HTML + CSS.

Не скажу как именно у Литреса, но в другом издательстве где я работал - это означало что epub проверен в iBooks и правильно там открывается, видны все разделы и ничего не съезжает нигде.