Вариант первый
Код на HTML дублировать но вместо id использовать id у родительскогоелемента и классы
JS код оформить в виде функции в которую передавать id родительского компонента а все выборки внутри делать по классам относительно родительского документа
И все слушатели, которые вешаешь на документ
root.addEventListener заменить слушателями на елементах с требуемым id
Вариант второй
Оформить это в виде компонента на одном из фреймвоков (Angular, Vue, React) и вставлять компонент в нужное место.
Ну и самое главное без теории это все будут метания, поэтому сначала
https://www.yakaboo.ua/ua/javascript-polnoe-rukovo...
Потом
https://uk.reactjs.org/docs/getting-started.html
Потом писать
Есть еще нейтив web components но я с ними не сталкивался, поэтому не раскажу ни за комьюнити, ни за поддержку
https://developer.mozilla.org/en-US/docs/Web/Web_C... 
