Средства и методы разработки

Потом конечно всё можно склеить в отдельную жирную автономную веб-аппликацию состоящую из одной HTML, которая загружается легковесным лоадером и кешируется в браузере (в итоге в следующий раз моментально взлетает даже при отсутствии интернета). Но это отдельная история. Изначально нужно чётко разделить:

1) javascript-код пишется только в *.js файликах и нигде больше не появляется, под страхом запрета профессиональной деятельности!

2) всё оформление пишется только в *.css файликах;

3) в HTML делается только логическая организация, делается как проще и как с ней работать будет из javascript, все хотелки касающиеся отображения уходят в пункт 2, где элементы адресуются преимущественно через назначение имен классов.

4) если нужно из javascript адресовать элементы -- лучше это делать через формы (элементы соответственно внутри HTML они должны быть внутри тэга form), или через querySelector(All) как более универсальный и неудобный способ;

5) не нужно писать конкретный, не генерализованный код, например, который работает с отдельным элементом -- нужно ввести новый уровень абстракции, класс, и написать абстрактный код который работает с новым классом элементов;

6) если нужно повесить евенты на конкретные элементы (см. пункт 5) -- то это не нужно делать в html, это делается из javascript (element.addEventListener). Ты ж когда обычные программы на ПК пишешь, не вписываешь C++ код прямо в визуальный дизайнер форм.