По какому принципу вставлять строку подключение js в структуру HTML?
Скрипту нужно дождаться загрузки DOM дерева.
2 решения:

1. Весь js код обвернуть в 
window.addEventListener("DOMContentLoaded",function(){

})

или

window.addEventListener('DOMContentLoaded',()=>{

});


2. При подключении скрипта <script src="" defer></script>

Статья
способы биндинга событий отличаются + ассинхронное выполнение - если ты добавляешь onclick до того как добавить элемент, то не стоит удивляться тому что он не сработал))