Новые, созданные с помощью js кнопки не выполняют свои функции. Не могу понять в чем проблема

const list = document.querySelector('#list');
const code = document.querySelector('#code');
var Final = document.querySelectorAll('.Final');
var ElementsList = document.querySelectorAll('.Elements');
var RarityList = document.querySelectorAll('.Rarity');
var NameValue = document.querySelectorAll('.Name')
var form = document.querySelectorAll('.form');
const add = function() {
    var AddList = document.createElement('form');
    AddList.classList = 'form';
    AddList.innerHTML = '<select name="Rarity" class="Rarity"><option class="rarity" value="Адамантовая">Адамантовая</option><option class="rarity" value="Мифическая">Мифическая</option><option class="rarity" value="Легендарная">Легендарная</option><option class="rarity" value="Эпическая">Эпическая</option><option class="rarity" value="Крафтовая">Крафтовая</option><option class="rarity" value="Редкая">Редкая</option><option class="rarity" value="Обычная">Обычная</option></select><select name="Elements" class="Elements"><option value="Огонь ?">Огонь</option><option value="Вода ?">Вода</option><option value="Дерево ?">Дерево</option><option value="Ветер ?">Ветер</option><option value="Песок ?">Песок</option><option value="Молния ⚡️">Молния</option></select><label for="name">Имя</label><input type="text" name="name" class="name"><label for="vers">Верс</label><input type="text" name="vers" class="vers"></input>'
    list.appendChild(AddList);
    var AddCode = document.createElement('p');
    AddCode.classList = 'Final';
    code.appendChild(AddCode);
    Final = document.querySelectorAll('.Final');
    ElementsList = document.querySelectorAll('.Elements');
    RarityList = document.querySelectorAll('.Rarity');
    NameValue = document.querySelectorAll('.Name')
    form = document.querySelectorAll('.form');
}
RarityList.forEach((Rarity, index) => {
    Rarity.addEventListener('change', () => {
        const RarityValue = RarityList[index].value;
        const ElementsValue = ElementsList[index].value;
        Final[index].innerHTML = '&lt;b&gt;Боевая карта ⚔️&lt;/b&gt;<br><br>&lt;b&gt;Редкость:&lt;/b&gt; ' + RarityValue + '<br>&lt;b&gt;Стихия:&lt;/b&gt; ' + ElementsValue + '<br><br>&lt;b&gt;?Карта:&lt;/b&gt; ';
    })
}); 
ElementsList.forEach((Elements, index) => {
    Elements.addEventListener('change', (e) => {
        const RarityValue = RarityList[index].value;
        const ElementsValue = ElementsList[index].value;
        Final[index].innerHTML = '&lt;b&gt;Боевая карта ⚔️&lt;/b&gt;<br><br>&lt;b&gt;Редкость:&lt;/b&gt; ' + RarityValue + '<br>&lt;b&gt;Стихия:&lt;/b&gt; ' + ElementsValue + '<br><br>&lt;b&gt;?Карта:&lt;/b&gt; ';
    })
});