Похоже, что это https://jsfiddle.net/5dcfmo6h/ работает, как вы хотите.
Прежде всего, не используйте innerHTML
, используйте метод cloneNode
.
Во-вторых, уничтожьте select2
перед клонированием узла. Затем снова инициализируйте select2
для всех .myselect
элементов.
В-третьих, не используйте одни и те же атрибуты id
на странице снова и снова - идентификаторы должны быть уникальными.
JS код:
["modal1", "modal2"].forEach((modalE) => {
var modal = document.getElementById(modalE);
var trigger = document.getElementById(`${modalE}-t`);
var closeButton = document.getElementById(`${modalE}-cb`);
trigger.addEventListener("click", function () {
modal.classList.toggle("show-modal");
});
closeButton.addEventListener("click", function () {
modal.classList.toggle("show-modal");
});
window.addEventListener("click", function (event) {
if (event.target === modal) {
modal.classList.toggle("show-modal");
}
});
});
$(".myselect").select2({
placeholder: "Choose a option",
});
function addStatR(){
$(".myselect").select2('destroy');
const clone = document.querySelector('.stats-conditions').cloneNode(true);
document.getElementById('stats-conditions').appendChild(clone);
$(".myselect").select2({
placeholder: "Choose a option",
});
}
const addStats = document.getElementById("addStatR")
addStats.onclick = addStatR