[FagotPetrova]

Подскажите пожалуйста-имеется несколько боковиков(их можно добавлять при нажатии на "+") и в каждом боковике есть кнопка редактирования при которой открывается модальное окно.В это модальном окне я ввожу текст в 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>