How I can set a modal for each input value? In Vanilla JS, are there any examples?

Here is my full code https://codesandbox.io/s/modal-forked-redh0c

With addTask I create the element

and every element should have modal,

modal should be unique for every single element

How I can do so?

//add new task functional
function addTask() {
    const btn = document.querySelector('.add__btn');
    const addBtn = document.querySelector('.add__item-btn');
    const cancelBtn = document.querySelector('.cancel__item-btn');
    const textarea = document.querySelector('.textarea');
    const form = document.querySelector('.form');

    //get value from textarea and put it val.
    let value;

    btn.addEventListener('click', () => {
        //show and hide form and btn
        form.style.display = 'block';
        btn.style.display = 'none';
        addBtn.style.display = 'none';

        //get value and show/hide btn
        textarea.addEventListener('input', (e) => {
            value = e.target.value;
            if (value) {
                addBtn.style.display = 'block';

            } else {
                addBtn.style.display = 'none';
            }
        });

    });

    //delete  all
    cancelBtn.addEventListener('click', () => {
        textarea.value = '';
        value = '';
        form.style.display = 'none';
        btn.style.display = 'flex';
        dragNdrop();
    });

    //add element in board
    addBtn.addEventListener('click', () => {
        const newItem = document.createElement('div');
        newItem.classList.add('list__item');
        newItem.draggable = true;
        newItem.textContent = value;
        lists[0].append(newItem);
        //clear info from textarea and form
        textarea.value = '';
        value = '';
        form.style.display = 'none';
        btn.style.display = 'flex';
        dragNdrop();
    });

}

addTask();


function openModal() {
    const lists = document.querySelectorAll('.list');

}
openModal()