Sergio

Нужно передать часовой пояс как 3-й аргумент после формата, тогда должно заработать. Согласно документации на сайте moment.js:

var b = moment.tz("May 12th 2014 8PM", "MMM Do YYYY hA", "America/Toronto");

Не забудьте подключить модуль moment-timezone.

Проще всего было бы создать шаблон строки с нужными вам ячейками, а потом его просто добавлять в таблицу, заполняя где надо пробелы. Советую погуглить Mustache / Handlebars.

Пример шаблона:

<tr>
    <input type="hidden" value="{{sysid}}" class="sysid">
    <td>
        <p class="bold">{{personName}}</p>
        <p class="bold">{{personAddress}}</p>
    </td>
</tr>

Потом просто вызываете Mustache вот так:

Mustache.render(templateHtmlString, {
    sysid: 456,
    personName: 'John Doe',
    personAddress: '123 Main St',
});

Другой вариант - использовать frontend-фреймворк аля React / Vue / Angular.

Если подключение сторонних скриптов не вариант, то кроме ручного конструирования строк и ячеек, как в вашем примере, не знаю способов (разве что написать свой Mustache).

Как вариант ещё можно реализовать API на стороне PHP, которое возвращало бы HTML для новых строчек. Некоторые так делают (или раньше делали).

По-моему у вас некорректно удаляются listener-ы, т.к. вы связывая метод с this через вызов this.onButtonGarageNext.bind(this) вы тем самым создаёте новую функцию, а в removeEventListener() вы передаете сам метод onButtonGarageNext. Получается, что ничего не удалится, т.к. такая функция не навешана не событие click и listener не найдётся при удалении.

Нужно где-то запомнить функцию, возвращаемую из bind() и потом передавать её в removeEventListener().

Насчёт повторяющегося кода - я бы записал ссылки на элементы .top-menu, #btn-garage-next, #btn-garage-prev в какое-нибудь поле класса при инициализации, и потом их переиспользовал в removeListeners(), например:

this.menuBbtn = document.querySelector('.top-menu');
this.btnGarageNext = document.querySelector('#btn-garage-next');
this.btnGaragePrev = document.querySelector('#btn-garage-prev');

Если вы используете React, то там для этого есть специальный атрибут ref - https://ru.reactjs.org/docs/refs-and-the-dom.html

По-моему надо запомнить начальное состояние (при загрузке страницы), потом при отправке формы пройтись по всем строчкам таблицы и проверить, совпадает ли значение с изначальным. Если нет - добавить соотв. запись в массив.

Что-то вроде такого:

var initialState = serialize();

function serialize() {
    var data = [];
    var rows = myTable.rows;

    for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var id = row.cells[0].textContent;
        var info = row.cells[2].firstChild.value;
        var status = row.cells[3].firstChild.value;
        data.push({
            id: id,
            info: info,
            status: status
        });
    }

    return data;
}

function onSubmit() {
    var data = [];
    var currentState = serialize();

    for (var i = 0; i < currentState.length; i++) {
        var entry = currentState[i];
        var oldEntry = initialState.find(e => e.id == entry.id);
        if (oldEntry.state != entry.state || oldEntry.info != entry.info) {
            data.push(entry);
        }
    }

    // отправить реквест с данными из data
}

Потому что путь начинается на ./ поэтому он и ищет относительно текущей директории, т.е директории текущего файла, коей является css

Советую поменять ./src/img на src/img или ../img

нужно генерировать число на стороне сервера и посылать его всем (через API какое-нибудь или WebSocket)

Как вариант можно добавить внутрь каждой кнопки иконку .feather-close, скрытую по умолчанию, и по клику на кнопку показывать эту иконку и скрывать изначальную иконку:

<!-- HTML -->

<div class="header__button">
    <button class="btn header__basket_btn">
        <i class="icon feather-shopping"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__search_btn">
        <i class="icon feather-search"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__user_btn">
        <i class="icon feather-user"></i>
        <i class="close-icon feather-close"></i>
    </button>
</div>

/* CSS */

.header__button .btn .close-icon {
    display: none;
}
.header__button .btn.close .icon {
    display: none;
}
.header__button .btn.close .close-icon {
    display: inline;
}

// JavaScript

$('.header__button .btn').click(function() {
    $(this).toggleClass('close');
});