WebEagle

document.addEventListener("DOMContentLoaded", function(event) { 
    const focusElement = document.querySelector('.brz-tabs__item--content ');
    if (focusElement) {
        focusElement.focus();
    }
});

td {
    vertical-align: top;
}

Класс адаптируйте под свою таблицу

ну конечно не самый лучший пример (side effect присутствует)

var flagStatus = new Map();
flagStatus('request1', 'init');
flagStatus('request2', 'init');
// ....
flagStatus('requestN', 'init');

// тут делаем вызовы в цикле, после каждого вызова меняем статус в flagStatus на finish (любой, чтобы вам было понятно что этот завершен)

// перед вызовом действия проверяем чтобы все в flagStatus было finish

let parentObject = document.querySelector(/* селектор для родительского элемента, можно body*/);
let span = document.querySelectorAll(".yith-wcwl-items-count");
const config = {
    attributes: true,
    childList: true,
    subtree: true
};

// Колбэк-функция при срабатывании мутации
const callback = function(mutationsList, observer) {
    for (let i = 0; i < span.length; i++) {
        let isEmpty = Number( span[i].textContent ) === 0;
        span[i].classList[ isEmpty ? "add" : "remove" ]("hidden");
    }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(parentObject , config);

Как-то так, но лучше на событие изменения в элементе. или там кто этот ноль подставляет

Проблема в пузырях, если реализовывать красиво - лучше JS + CANVAS. В рамках в фафанчик делать - стоит для получения опыта. Если Сроки сжаты и не хочется облажаться - тогда запариваться не стоит))
По-хорошему, время много убьешь если опыта нет, при учете сделать красиво и хорошо

1. Вариант использовать state, и реализовать дозагрузку книг в текущий список
2. Если реализуете пагинацию - при расчете учитывайте на какой странице находитесь

let currentPage = 0; // начинать лучше с нуля
let booksOnPage = 4;

использование:

return data.map((book, index) => ({
      fields: {
        number: (currentPage * booksOnPage) +index + 1,

Потребуется БД, вероятно у вас MySQL и это хорошо)) + на стороне сервера запускаем session
Сессия нам потребуется чтобы туда занести информацию о первом клике,

if (!isset($_SESSION['is_add_to_db'])) {
// добавление в БД, проверка избавит вас от лишних запросов в БД
}

Таблица в базе:
userId - либо уникальный идентификатор пользователя, если вы пользователей никак в базе не храните - то можно UUID или ID сессии. В любом случае это поле должно быть уникальным
Остальные поля не обязательны, по вашему желанию от ваших нужд. Но я бы добавил created dateTime чтобы знать когда произошел клик

Сколько строк в таблице - столько уникальных кликов

когда срабатывает hover проверять у элемента tagName и сравнивать его с 'A' или "BUTTON' можно еще, и тогда изменять размер следящего элемента

<button type="button">Активная</button>
<button type="button" disabled>Не активная</button>
<button type="button" id="button1">Будет неактивная после выполнения скрипта</button>

если кодом

const button = document.getElementById('button1');
button.setAttribute('disabled', 'disabled');

для активации удалить атрибут removeAttribute

ну и в CSS

button:disabled {
/* стили */
}

Я собираю с помощью rollup
в package.json в scripts добавляем

"build:server": "rollup --config server/rollup.config.js",

в package.json в dependencies добавляем

"rollup-plugin-json": "^4.0.0",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript2": "^0.26.0",

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from 'rollup-plugin-json';
import pkg from "../package.json";
import copy from 'rollup-plugin-copy';

export default [
    {
        input: 'server/server.ts',
        plugins:[
            typescript({
                typescript: require('typescript'),
                "declaration": false,
                "module": "esnext",
                "noImplicitAny": false,
                "target": "es5",
                "skipLibCheck": true,
                "allowSyntheticDefaultImports": true,
                "lib": ["dom", "es6"],
                "typeRoots": ["node_modules/@types"]
            }),
            resolve({
                browser: false,
                main:true
            }),
            json(),
            commonjs(),
        ],
        external: [
            ...Object.keys(pkg.dependencies || {})
        ],
        output: {
            file: 'dist/server/server.js',
            format: 'cjs'
        }

    },
]

Вероятно придётся чем-то пожертвовать если использовать cover и отпозиционировать background-position

Поддерживаю, вариант margin: 0 auto; Для одно элемента, главное не забыть ему ширину прописать, иначе не всегда срабатывает

на оба поля ввода даты поставить событие onchage
Можно поставить условие на выбор первой даты, если вторая дата не выбрана - то автоматически выставляется +5 дней. И по хорошему если не выбрана первая дата делал бы disabled на второй инпут.
При событии onchange на втором инпуте проверять условие, и если нет проходи автоматически очищать поле ввода.
Важно! При обработке onchange, если поле пустое - просто игнорим