Подскажите пожалуйста-имеется несколько боковиков(их можно добавлять при нажатии на "+") и в каждом боковике есть кнопка редактирования при которой открывается модальное окно.В это модальном окне я ввожу текст в input.И сейчас как я понял из за того что у меня одинаковые id=1(ну точнее каждый раз перезапись идет) текст на каждом модальном окне одинаковый,а мне надо чтобы текст был разный для каждого боковика.
var tabContainer = document.getElementById("tabContainer");//tabContainer-самый верхний
var buttonContainer = tabContainer.querySelector(".button_Container");//div в котором содержатся кнопки
var tabPanels = document.querySelectorAll(".tabPanel");
var addButton = document.getElementById("addButton");
var tabCount = tabPanels.length;
var panelContainer = document.getElementById("tab_panels_cont")//3 кнопки редактирования
//Функция для выбора активного элемента(name это или панель или кнопка-и тогда текущей(выбранной)
// панели или кнопке присваиваем active)
function showPanel(id, name) {
var ElementEvent = document.querySelectorAll(name);//Выбираем определенные классы
ElementEvent.forEach(function (item) {
item.classList.remove("active")//Удаляем слово active
var ElementActive = document.getElementById(id)
ElementActive.classList.add("active")
});
}
addButton.addEventListener("click", function () {//Этот Listener для добавления по кнопке зеленой нового боковика
tabCount++;
var newButton = document.createElement("button");
newButton.id = tabCount
newButton.classList.add("tabs");//Добавляем класс для создаваемых кнопок чтобы прицепились к стилю эти кнопки
newButton.innerHTML = `<div>Боковик ${tabCount}<img class="tabs_close" onclick="delete_tab(${tabCount})" src="/static/images/close.jpg"></div>`;
newButton.onclick = function () {
showPanel(`panel${newButton.id}`, '.tabPanel')//Тут обращаемся к tabPanel чтобы менять индексы у кнопок редактирования
showPanel(newButton.id, ".tabs")//Тут обращаемся к tabPanel чтобы менять индексы у боковиков
};
buttonContainer.appendChild(newButton);
var newPanel = document.createElement("div")
newPanel.id = `panel${tabCount}`
newPanel.classList.add("tabPanel");
newPanel.innerHTML = `<div class="buttons_pole">
<button id=addPole${tabCount} class="add_pole"></button>
<button id=removePole${tabCount} class="remove_pole"></button>
<button id=openModal${tabCount} class="open_modal"></button>
</div>`
panelContainer.appendChild(newPanel);
OpenModal()
}
);
function ClickFirstButtinPanel(){
showPanel("panel1", '.tabPanel')
showPanel("1", ".tabs")
showPanel("modal1", ".modal_content")
}
function delete_tab(id) {
const id_element = document.getElementById(id)
id_element.remove()
}
function OpenModal() {
var modal = document.getElementById('myModal');
//var modalContent = document.getElementById('modalContent');
var ElementEvent = document.querySelectorAll('.open_modal');
var SelectPole = document.querySelectorAll('.input_for_pole');
console.log(SelectPole)
ElementEvent.forEach(function (item) {
item.onclick = function () {
modal.style.display = "block";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
SelectPole.forEach(function (item) {
item.id=1
});
}
<button id="addButton"></button>
<div id="tabContainer" class="tab_Container">
<div class="button_Container">
<button id="1" class="tabs active" onclick=ClickFirstButtinPanel()>Боковик1
<img class="tabs_close" src="/static/images/close.jpg">
</button>
</div>
<div class="tab_panels_cont" id="tab_panels_cont">
<div class="tabPanel active" id="panel1">
<div class="buttons_pole">
<button class="add_pole" id="addPole1"></button>
<button class="remove_pole" id="removePole1"></button>
<button class="open_modal" id="openModal1" onclick=OpenModal()></button>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal_content" id="modalContent">
Выберите поле: <input type="text" class="input_for_pole" id="input_for_pole">
<button class="btn_save_pole" id="btn_save_pole" onclick=SavePole()>Сохранить</button>
</div>
</div>
