проблема множественного добавления

Отслеживаю элементы iteminfo0_item_name и iteminfo1_item_name

(function() {
    console.log(1);
    document.getElementById("iteminfo0_item_name").addEventListener(
        "DOMSubtreeModified",
        function() {
            console.log("0");
            inventory_logos0();
        }
    );
    document.getElementById("iteminfo1_item_name").addEventListener(
        "DOMSubtreeModified",
        function() {
            console.log("2");
            inventory_logos1();
        }
    );
})();

Потом функциями inventory_logos1 и inventory_logos0 добавляю span (функция inventory_logos1 идентична inventory_logos0)

function inventory_logos0(){
    var d0 = document.getElementById('iteminfo0_item_tags');
    d0.insertAdjacentHTML('beforeend', `
<span class="item_market_action_button_contents">Слова</span>
`);
    console.log(3);
}

Проблема в том что он к моим iteminfo0_item_tags и iteminfo1_item_tags добавляется сперва два span, затем после очередного изменения iteminfo0_item_name или iteminfo1_item_name к уже существующим двум span добавляются еще два span. Вопрос, как сделать чтобы страница загрузилась, произошли изменения в iteminfo0_item_name или iteminfo1_item_name, предыдущие два span удалились, а добавились новые два?