При нажатии на кнопку "yes" в диалоговом окне удаляется не тот элемент. Как передать айди элемента в кнопку yes, чтобы удалить нужный тасу из массива?

let todos = [
    {
        id: Math.random(),
        title: 'Купить продукты',
        description: 'Хлеб, молоко, мясо',
        position: 1
    },
    {
        id: Math.random(),
        title: 'Создать этот сайт',
        description: 'Исправить ошибку',
        position: 1
    },
    {
        id: Math.random(),
        title: 'Посмотреть фильмы и сериалы',
        description: 'Человек паук: Нет пути домой, Соник 2, Доктор Стрендж 2: Мультивселенная безумия',
        position: 2
    },
    {
        id: Math.random(),
        title: 'Проверка этого сайта',
        description: 'Исправить баг с скроллом, исправить баг с модальной окной удаления',
        position: 3
    },
    {
        id: Math.random(),
        title: 'Добавить адаптацию в этот сайт',
        description: 'Всё работает отлично?',
        position: 3
    },
    {
        id: Math.random(),
        title: '321321321',
        description: 'asdasdasdasd',
        position: 2
    }
]


// Добавление новых тасков
let form = document.forms.Todo

form.onsubmit = (event) => {
    event.preventDefault()

    let obj = {
        id: Math.random(),
        title: String,
        description: String,
        position: 1
    }
    let fm = new FormData(form)

    fm.forEach((value, key) => {
        obj[key] = value
    })

    todos.push(obj)

    CreateElement(todos)
}

// Отрисовка
let todo = document.querySelector('.todo .unshift-here')
let inProgress = document.querySelector('.inprogress .unshift-here')
let done = document.querySelector('.done .unshift-here')
let yes = document.querySelector('.choise div:nth-child(1)')


const CreateElement = (arr) => {
    todo.innerHTML = ""
    inProgress.innerHTML = ""
    done.innerHTML = ""
    for (let item of arr) {
        let div = document.createElement('div')
        let h3 = document.createElement('h3')
        let br = document.createElement('br')
        let p = document.createElement('p')
        let div2 = document.createElement('div')
        let leftArrow = document.createElement('div')
        let rightArrow = document.createElement('div')
        let deleteBtn = document.createElement('div')

        div.classList.add('todo-task')
        div2.classList.add('status')
        leftArrow.classList.add('arrow-left')
        rightArrow.classList.add('arrow-right')
        deleteBtn.classList.add("delete")
        div.setAttribute('id', item.id)

        h3.innerHTML = item.title
        p.innerHTML = item.description
        leftArrow.innerHTML = `<`
        rightArrow.innerHTML = `>`

        div2.append(leftArrow, rightArrow, deleteBtn)
        div.append(h3, br, p, div2)
        todo.append(div)
        // console.log(div);

        // Сортировака по позициям
        function sort() {
            if (item.position == 4) {
                item.position = 1
                console.log(item.position);
            }
            if (item.position == 1) {
                todo.prepend(div)
            } else if (item.position == 2) {
                inProgress.append(div)
            } else {
                done.append(div)
            }
        }

        rightArrow.onclick = () => {
            item.position++
            div.setAttribute('position', item.position)
            console.log(item.position);
            sort()
        }

        leftArrow.onclick = () => {
            item.position--
            div.setAttribute('position', item.position)
            console.log(item.position);
            sort()
        }
        
        deleteBtn.onclick = () => {
            OpenDeleteModal(item.id);
        }
        
        // Теперь это не нужно
        //yes.onclick = () => {
        //    Delete(item.id)
        //    CreateElement(todos)
        //}

        sort()
    }
}
CreateElement(todos)

//Модальное окно
let modal = document.querySelector('.modal-window')
let modalDelete = document.querySelector('.modal-delete')
let deleteBtn = document.querySelectorAll('.delete')
let btnNO = document.querySelector('.choise div:nth-child(2)')
let bg_modal = document.querySelector('.modal-background')
let openBtn = document.querySelector('.button-add')
let closeBtn = document.querySelector('.modal-background span')
let addBtn = document.querySelector('.add')
let input = document.querySelector('form input')
let textarea = document.querySelector('form textarea')
let body = document.querySelector('body')


function OpenDeleteModal(item_id) {

    // копируем окно
    let newModal = modalDelete.cloneNode(true);
    
    // крепим к body
    body.appendChild(newModal);
    
    // показываем
    show(newModal);
    
    // кнопки
    let btnYes = newModal.querySelector('.choise div:nth-child(1)');
    let btnNo = newModal.querySelector('.choise div:nth-child(2)');
    
    btnYes.onclick = () => {
      Delete(item_id);
      CreateElement(todos)
      close(newModal);
    };
    
    btnNo.onclick = () => {
      close(newModal);
    };
    
    
    function show(el) {
        el.classList.add('show')
        bg_modal.style.display = "block"
        setTimeout(() => {
            bg_modal.style.transition = "none"
        }, 500)
        body.style.overflow = "hidden"
        setTimeout(() => {
            bg_modal.style.opacity = "1"
        }, 100);
    }
    
    function close(el) {
        el.classList.remove('show')
        bg_modal.style.opacity = "0"
        setTimeout(() => {
            bg_modal.style.display = "none"
            el.remove()
        }, 500);
        body.style.overflowY = "scroll"
    }
    
    // Удаление элементов
    function Delete(id) {
        todos = todos.filter(item => item.id !== id)
        
    }
}

function Active() {
    modal.classList.add('show')
    bg_modal.style.display = "block"
    setTimeout(() => {
        bg_modal.style.transition = "none"
    }, 500)
    body.style.overflow = "hidden"
    setTimeout(() => {
        bg_modal.style.opacity = "1"
    }, 100);
}


function noActive() {
    modalDelete.classList.remove('show')
    modal.classList.remove('show')
    bg_modal.style.opacity = "0"
    setTimeout(() => {
        bg_modal.style.display = "none"
    }, 500);
    body.style.overflowY = "scroll"
}

openBtn.onclick = () => Active()

closeBtn.onclick = () => noActive()

addBtn.onclick = () => {
    if (input.value && textarea.value) noActive()
    else (input && textarea).style.boxShadow = '0px 0px 2.5px 2.5px red'
}


bg_modal.onclick = () => noActive()

input.onkeyup = () => {
    if (input.value) input.style.boxShadow = '0px 0px 2.5px 2.5px green'
    else input.style.boxShadow = '0px 0px 2.5px 2.5px red'
}

textarea.onkeyup = () => {
    if (textarea.value) textarea.style.boxShadow = '0px 0px 2.5px 2.5px green'
    else textarea.style.boxShadow = '0px 0px 2.5px 2.5px red'
}

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Fira Sans Condensed', sans-serif;
}

main {
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 15px;
}

.logo {
    margin: 0 auto;
    width: 400px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    user-select: none;
}

.logo h1 {
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 50px;
}

.logo img {
    width: 75px;
    height: 75px;
}

.container {
    margin: 0 auto;
    width: fit-content;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter {
    width: 400px;
    height: 550px;
    background-color: rgb(215, 215, 215);
    text-align: center;
    padding-top: 10px;
    border-radius: 15px;
    border: 1px solid rgb(192, 192, 192);
}

.chapter h2 {
    width: fit-content;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 10%;
}

.unshift-here {
    margin: 0 auto;
    margin-top: 30px;
    width: 95%;
    height: 81%;
    overflow-y: scroll;
}

.todo-task {
    margin: 0 auto;
    width: 90%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
}

.todo-task h3 {
    width: fit-content;
    margin: 0 auto;
    letter-spacing: 1px;
}

.status {
    margin: 0 auto;
    margin-top: 15px;
    width: 140px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status .delete {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: red;
    cursor: pointer;
}

.arrow-left,
.arrow-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 20px;
    font-size: 20px;
    font-weight: 500;
    border: 1px solid blue;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s ease;
}


.arrow-left:hover,
.arrow-right:hover {
    background-color: blue;
    color: white;
}

.button-add {
    width: 100px;
    height: 50px;
    border-radius: 25%;
    background-color: blue;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: .3s ease;
    position: fixed;
    right: 25px;
    bottom: 25px;
    cursor: pointer;
    z-index: 1000;
}

.button-add img {
    display: none;
}

.button-add:hover {
    box-shadow: 0px 0px 5px 5px rgb(0, 85, 255);
}

/* Modal */
.modal-background {
    width: 100vw;
    height: 100%;
    position: fixed;
    backdrop-filter: blur(15px);
    z-index: 998;
    opacity: 0;
    display: none;
    top: 0px;
    left: 0px;
    transition: 1s ease;
}

.modal-background span {
    font-size: 100px;
    position: fixed;
    top: 0px;
    right: 20px;
    transition: none;
    cursor: pointer;
}


.modal-window {
    position: fixed;
    top: -100%;
    left: 50%;
    width: 400px;
    height: 300px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow: hidden;
    transition: .5s ease;
    opacity: 0;
}

.modal-window h2 {
    font-size: 25px;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%);
}

.modal-window input {
    position: absolute;
    transform: translate(-50%);
    top: 15%;
    left: 50%;
    width: 70%;
    height: 45px;
    text-align: center;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: rgb(213, 213, 213);
    font-size: 17px;
    font-weight: 600;
}

.modal-window input::placeholder {
    font-size: 16px;
}

.modal-window textarea {
    width: 70%;
    height: 100px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translate(-50%);
    resize: none;
    outline: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 17px;
}

.modal-window textarea::placeholder {
    text-align: center;
    font-size: 16px;
    font-family: 'Fira Sans Condensed', sans-serif;
}

.modal-window .add {
    /* display: block; */
    width: 30%;
    height: 40px;
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translate(-50%);
    border: none;
    background-color: green;
    color: white;
    border-radius: 10px;
    padding: 10px;
    font-size: 17px;
    transition: .3s ease;
    cursor: pointer;
}

.modal-window .add:hover {
    box-shadow: 0px 0px 5px 5px rgb(26, 255, 0);
}

.modal-delete {
    position: fixed;
    top: -100%;
    left: 50%;
    width: 370px;
    height: 200px;
    background-color: white;
    border: 2px solid red;
    border-radius: 10px;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 998;
    transition: 0.7s ease;
    opacity: 0;
}

.modal-delete h1 {
    width: fit-content;
    margin: 0 auto;
    font-size: 40px;
}

.modal-delete .choise {
    margin: 0 auto;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 220px;
    height: auto;
}

.modal-delete .choise div {
    width: 100px;
    height: 45px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    font-size: 22px;
    cursor: pointer;
}

.show {
    top: 50%;
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Styles/style.css">
    <link rel="stylesheet" href="./Styles/mediascreen.css">
    <link rel="shortcut icon" href="./Icons/favicon.ico" type="images/x-icon">
    <link rel="favicon" href="./Icons/favicon.ico">
    <title>Notes Manager</title>
</head>

<body>
    <main>
        <div class="logo">
            <h1>Notes Manager</h1>
            <img src="./Icons/notes_icon.png" alt="logo">
        </div>
        <div class="container">
            <div class="todo chapter">
                <h2 style="background-color: #ff0000;">To do</h2>
                <div class="unshift-here"></div>
            </div>
            <div class="inprogress chapter">
                <h2 style="background-color: rgb(255, 255, 0);">In progress</h2>
                <div class="unshift-here"></div>
            </div>
            <div class="done chapter">
                <h2 style="background-color: #00ff00;">Done</h2>
                <div class="unshift-here"></div>
            </div>
        </div>
    </main>
    <div class="button-add">
        <p>New task</p>
        <img src="./Icons/plus_icon.png" alt="plus">
    </div>

    <!-- Modal -->
    <div class="modal-background">
        <span>&times;</span>
    </div>
    <div class="modal-window">
        <i>
            <h2>New Task</h2>
        </i>
        <form name="Todo">
            <input required placeholder="Please write a title" type="text" name="title">
            <textarea required placeholder="Please write a description" name="description"></textarea>
            <button class="add">Add</button>
        </form>
    </div>
    <div class="modal-delete">
        <h1><span style="color: red;">Delete</span> this note?</h1>
        <div class="choise">
            <div style="background-color: red;">Yes</div>
            <div style="background-color: green;">No</div>
        </div>
    </div>
</body>

</html>