JavaScript событие click реализуется два раза

HTML код:

             <div class="main__filter_choice">
                <h3 class="main__filter_name">Режиссёры</h3>
                <div class="main__filter_wrapper">
                    <ul class="main__filter_items">
                        <li class="main__filter_btn">
                            <label class="main__filter_item" for="1">
                                <input type="checkbox" id="1" value="Боевик">
                                <span class="main__filter_checkbox"></span>
                                <p class="main__filter_title">Боевик</p>
                            </label>
                        </li>
                        <li class="main__filter_btn">
                            <label class="main__filter_item" for="2">
                                <input type="checkbox" id="2" value="Детектив">
                                <span class="main__filter_checkbox"></span>
                                <p class="main__filter_title">Детектив</p>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>

JavaScript код:

let choices = document.querySelectorAll(".main__filter_btn");

choices.forEach(function (item) {
    item.addEventListener("click", createElem);
});

function createElem() {
    let text = this.querySelector(".main__filter_title").innerHTML;
    let li = document.createElement("li");
    li.className = "filter__tags-item";
    li.innerHTML = ${text}<span class="filter__tags-item__cross"></span>;
    tagsList.append(li);
}

Данный код через цикл прописывает событие к каждому элементу класса "main__filter_btn". Чтобы после нажатия на один из этих элементов, создавался html элемент.

Но само событие происходит два раза. Из-за чего это может быть? Я предполагаю, что само событие навешивается два раза, из-за чего?

Заранее большое спасибо.