Денис: id - это id, а класс - это класс. Я показал как можно вставить. я обновил немного, можете посмотреть. Класс можно через classList.add добавить (как я указал в комментарии) или просто написать в аттрибуте при 2ом методе. Что за ТС? и ещё. писать обработчики в html - плохо. инлайновый js - тоже не хорошо. Где только этому учат.
вешать обработчики внутри html - плохая практика, т.к. читая код (js) вы и понятия не имеете, что функция kalk висит на клике.
document.querySelector('#button').onclick = kalk;
Павел: Вся идея в том, чтобы данные и шаблон были в одной области видимости, и вам не нужно было 400 раз грузить шаблон, так же как вам не нужно сохранять его в webStorage, достаточно просто 1 раз подгрузить, а потом юзать. Тем более если вы используете промисы - то сделайте последовательно - подгрузить шаблон/данные, а потом используя уже подгруженные данные и шаблон(не сохраняя) производите рендер.
Павел: 15 - не проблема, главно не руками все добавлять, а автоматизировать. Если они не очень большие, то норм. Иначе асинхронно тянуть. Ещё как вариант, в лоб - несколько изменить алгоритм. Т.е. тянем шаблон - в колбэке тянем данные - в колбэке рендер. Т.е. в таком случае только 1 запрос на шаблон идет.
Nikolay Talanov: то, что вы пишете - очевидно. Вопрос в том, можно ли заставить работать transition, не задавая статичную ширину элемента. (т.к. она неизвестна)