EditBtn doesnt work please help

Вот код
EditBtn не работает помогите пж

let nameo = document.querySelector('.name')
let lastNameo = document.querySelector('.surname')
let faceo = document.querySelector('.face')
let btn = document.querySelector('.btn-hover')
let people = document.querySelector(".people")
let list = document.querySelector('.people')

btn.addEventListener('click', () => {
addData();
});

function addData() {
if (!nameo.value.trim() || !lastNameo.value || !faceo.value) {
alert('Заполните поле');
return;
}

let obj = {
name: nameo.value,
lastName: lastNameo.value,
face: faceo.value,
id: Date.now()
};

let data = JSON.parse(localStorage.getItem('person')) || [];
data.push(obj);
localStorage.setItem('person', JSON.stringify(data));

nameo.value = '';
lastNameo.value = '';
faceo.value = '';

readData();
}
readData()

function readData() {
list.innerHTML = '';
let newData = JSON.parse(localStorage.getItem("person")) || [];
newData.forEach(el => {
let img = document.createElement('img');
let h2Name = document.createElement('h2');
let h2surName = document.createElement('h2');
let btnX = document.createElement('button');
let div = document.createElement('div');
let editBtn = document.createElement('button')
let btn = document.createElement('div')
let text = document.createElement('div')
let Alltext = document.createElement('div')

editBtn.classList.add('editBtn')
btn.classList.add('allBtn')
text.classList.add('allText')
Alltext.classList.add('UseBag')
div.classList.add('headList')
img.src += el.face;
h2Name.innerText = 'Имя: ' + el.name;
h2surName.innerText += 'Фамилия: ' + el.lastName;
btnX.innerHTML += "<box-icon name='trash'></box-icon>";
editBtn.innerHTML += "<box-icon name='pencil'></box-icon>"

btn.append(editBtn)
btn.append(btnX);

text.append(h2Name);
text.append(h2surName);
Alltext.append(btn)
Alltext.append(text);
div.append(Alltext)
div.append(img);
list.append(div);
btnX.addEventListener('click', () => {
removeData(el.id);
});
editBtn.addEventListener('click', () => {
editData(el.ind)
})
});
}

function removeData(id) {
let data = JSON.parse(localStorage.getItem('person')) || [];
data = data.filter(el => el.id !== id);
localStorage.setItem('person', JSON.stringify(data));
readData();
}
function editData(id) {
let data = JSON.parse(localStorage.getItem('person')) || [];
let index = data.findIndex(el => el.id === id);

if (index !== -1) {
name.value = data[index].name;
lastName.value = data[index].lastName;
face.value = data[index].face;
}
}

JS

let nameo = document.querySelector('.name')

let lastNameo = document.querySelector('.surname')

let faceo = document.querySelector('.face')

let btn = document.querySelector('.btn-hover')

let people = document.querySelector(".people")

let list = document.querySelector('.people')



btn.addEventListener('click', () => {

    addData();

});



function addData() {

    if (!nameo.value.trim() || !lastNameo.value || !faceo.value) {

        alert('Заполните поле');

        return;

    }



    let obj = {

        name: nameo.value,

        lastName: lastNameo.value,

        face: faceo.value,

        id: Date.now()

    };



    let data = JSON.parse(localStorage.getItem('person')) || [];

    data.push(obj);

    localStorage.setItem('person', JSON.stringify(data));



    nameo.value = '';

    lastNameo.value = '';

    faceo.value = '';



    readData();

}

readData()



function readData() {

    list.innerHTML = '';

    let newData = JSON.parse(localStorage.getItem("person")) || [];

    newData.forEach(el => {

        let img = document.createElement('img');

        let h2Name = document.createElement('h2');

        let h2surName = document.createElement('h2');

        let btnX = document.createElement('button');

        let div = document.createElement('div');

        let editBtn = document.createElement('button')

        let btn = document.createElement('div')

        let text = document.createElement('div')

        let Alltext = document.createElement('div')



        editBtn.classList.add('editBtn')

        btn.classList.add('allBtn')

        text.classList.add('allText')

        Alltext.classList.add('UseBag')

        div.classList.add('headList')

        img.src += el.face;

        h2Name.innerText = 'Имя: ' + el.name;

        h2surName.innerText += 'Фамилия: ' + el.lastName;

        btnX.innerHTML += "<box-icon name='trash'></box-icon>";

        editBtn.innerHTML += "<box-icon name='pencil'></box-icon>"



        btn.append(editBtn)

        btn.append(btnX);



        text.append(h2Name);

        text.append(h2surName);

        Alltext.append(btn)

        Alltext.append(text);

        div.append(Alltext)

        div.append(img);

        list.append(div);

        btnX.addEventListener('click', () => {

            removeData(el.id);

        });

        editBtn.addEventListener('click', () => {

            editData(el.ind)

        })

    });

}



function removeData(id) {

    let data = JSON.parse(localStorage.getItem('person')) || [];

    data = data.filter(el => el.id !== id);

    localStorage.setItem('person', JSON.stringify(data));

    readData();

}

function editData(id) {

    let data = JSON.parse(localStorage.getItem('person')) || [];

    let index = data.findIndex(el => el.id === id);



    if (index !== -1) {

        name.value = data[index].name;

        lastName.value = data[index].lastName;

        face.value = data[index].face;

    }

}

стили

body{
margin: 0;
padding: 0;
background: #010002;
}
.container{
display: flex;
justify-content: center;
position: relative;
margin: 50px auto;
width: 900px;
height: 550px;
background: #010002;
border-radius: 20px;
}

.container:before,
.container:after{
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg,#9c9c9c,#525252,#b8b8b8,#414141,#cfcfcf,#707070,#5c5c5c,#9e9e9e,#9c9c9c,#636369);
background-size: 400% 400%;
width: calc(100% + 6px);
height: calc(100% + 6px);
border-radius: 20px;
z-index: -1;
animation: animate 3s ease alternate infinite;
}
.container:after{
filter: blur(6px);
}
@keyframes animate{
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
.inputBox{
position: relative;
width: 200px;
margin-top: 10px;
input{
width: 100%;
padding: 10px;
border: 1px solid rgb(51, 51, 51);
background: #0e0e0e;
border-radius: 5px;
outline: none;
color: rgb(207, 207, 207);
font-size: 1em;
transition: 0.5s;
}
span{
position: absolute;
top: 1px;
left: 0;
padding: 10px;
pointer-events: none;
font-size: 0.9em;
color: rgba(196, 196, 196, 0.527);
text-transform: uppercase;
transition: 0.5s;
}
input:valid ~ span,
input:focus ~ span{
color: #353535;
transform: translateX(10px) translateY(-7px);
font-size: 0.65em;
padding: 0 10px;
background: #868686;
border-left: 1px solid #555555;
border-right: 1px solid #646464;
letter-spacing: 0.2em;
}
input:valid,
input:focus{
border: 1px solid #4e4e4e;
}
}
.buttons {
margin: 10%;
text-align: center;
}

.btn-hover {
width: 120px;
font-size: 14px;
font-weight: 300;
color: #adadad;
cursor: pointer;
margin: 20px;
height: 35px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 10px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:focus {
outline: none;
}
.btn-hover{
font-family: "Lucida Console", "Courier New", monospace;
background-image: linear-gradient(to right, #747474, #363636, #505050, #2929298f); box-shadow: 0 5px 15px rgba(73, 69, 69, 0.4);
}
.toDo{
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: -90px;
user-select: none;
img{
pointer-events: none;
}
}

.list{
display: flex;
justify-content: center;
flex-direction: column;
width: 560px;
height: 520px;
user-select: none;
margin-left: 60px;
margin-top: 10px;
border-radius: 5px;
border: 2px solid #7c7c7c;
.inner {
width: 560px;
height: 30px;
border-bottom: 2.5px solid #7c7c7c;
h3{
height: 40px;
justify-content: center;
margin-top: -3px;
display: flex;
align-items: center;
font-family: "Lucida Console", "Courier New", monospace;
color: #747474;
}
}
}
.people{
display: flex;
flex-direction: column;
position: relative;
top: 1px;
width: 560px;
height: 500px;
overflow-y: scroll;
}
.people::-webkit-scrollbar{
background-color: #2c2c2c;
border-radius: 5px;

}
.people::-webkit-scrollbar-thumb{
background-color: #636369;
}
.headList{
display: flex;
height: 70px;
margin-top: 1px;
border-bottom: 2px solid #636369;
margin-bottom: 30px;
justify-content: space-between;
h2{
position: relative;
left: 50px;
top: -19px;
font-size: 18px;
color: #777777;
font-family: "Lucida Console", "Courier New", monospace;
}
img{
border-radius: 10px;
height: 60px;
width: 60px;
margin-top: 5px;
margin-right: 5px;
}
.allText{
padding-top: 10px;
}
}
.allBtn{
display: flex;
flex-direction: column;
position: relative;
top: -38px;

button{
margin-bottom: 5px;
border-radius: 4px;
border: 1px solid #6e6e6e86;
background: #414141;
font-size: 15px;
padding: 0 1px;
position: relative;
top: 40px;
left: 10px;
}
}
.UseBag{
display: flex;
}

CSS

body{

    margin: 0;

    padding: 0;

    background: #010002;

}

.container{

    display: flex;

    justify-content: center;

    position: relative;

    margin: 50px auto;

    width: 900px;

    height: 550px;

    background: #010002;

    border-radius: 20px;

}



.container:before,

.container:after{

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    background: linear-gradient(45deg,#9c9c9c,#525252,#b8b8b8,#414141,#cfcfcf,#707070,#5c5c5c,#9e9e9e,#9c9c9c,#636369);

    background-size: 400% 400%;

    width: calc(100% + 6px);

    height: calc(100% + 6px);

    border-radius: 20px;

    z-index: -1;

    animation: animate 3s ease alternate infinite;

}

.container:after{

    filter: blur(6px);

    }

    @keyframes animate{

    0%{

        background-position: 0 50%;

    }

    50%{

        background-position: 100% 50%;

    }

    100%{

        background-position: 0% 50%;

    }

}

.inputBox{

    position: relative;

    width: 200px;

    margin-top: 10px;

    input{

        width: 100%;

        padding: 10px;

        border: 1px solid rgb(51, 51, 51);

        background: #0e0e0e;

        border-radius: 5px;

        outline: none;

        color: rgb(207, 207, 207);

        font-size: 1em;

        transition: 0.5s;

    }

    span{

        position: absolute;

        top: 1px;

        left: 0;

        padding: 10px;

        pointer-events: none;

        font-size: 0.9em;

        color: rgba(196, 196, 196, 0.527);

        text-transform: uppercase;

        transition: 0.5s;

    }

    input:valid ~  span,

    input:focus ~ span{

        color: #353535;

        transform: translateX(10px) translateY(-7px);

        font-size: 0.65em;

        padding: 0 10px;

        background: #868686;

        border-left: 1px solid #555555;

        border-right: 1px solid #646464;

        letter-spacing: 0.2em;

    }

    input:valid,

    input:focus{

        border: 1px solid #4e4e4e;

    }

}

.buttons {

    margin: 10%;

    text-align: center;

}



.btn-hover {

    width: 120px;

    font-size: 14px;

    font-weight: 300;

    color: #adadad;

    cursor: pointer;

    margin: 20px;

    height: 35px;

    text-align:center;

    border: none;

    background-size: 300% 100%;

    border-radius: 10px;

    moz-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    -webkit-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}



.btn-hover:hover {

    background-position: 100% 0;

    moz-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    -webkit-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}



.btn-hover:focus {

    outline: none;

}

.btn-hover{

    font-family: "Lucida Console", "Courier New", monospace;

    background-image: linear-gradient(to right, #747474, #363636, #505050, #2929298f);  box-shadow: 0 5px 15px rgba(73, 69, 69, 0.4);

}

.toDo{

    margin-left: 15px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin-top: -90px;

    user-select: none;

    img{

        pointer-events: none;

    }

}



.list{

    display: flex;

    justify-content: center;

    flex-direction: column;

    width: 560px;

    height: 520px;

    user-select: none;

    margin-left: 60px;

    margin-top: 10px;

    border-radius: 5px;

    border: 2px solid #7c7c7c;

    .inner {

        width: 560px;

        height: 30px;

        border-bottom: 2.5px  solid #7c7c7c;

        h3{

            height: 40px;

            justify-content: center;

        margin-top: -3px;

        display: flex;

        align-items: center;

        font-family: "Lucida Console", "Courier New", monospace;

        color: #747474;

        }

    }

}

.people{

    display: flex;

    flex-direction: column;

    position: relative;

    top: 1px;

    width: 560px;

    height: 500px;

    overflow-y: scroll;

}

.people::-webkit-scrollbar{

    background-color: #2c2c2c;

    border-radius: 5px;

   

}

.people::-webkit-scrollbar-thumb{

    background-color: #636369;

}

.headList{

    display: flex;

    height: 70px;

    margin-top: 1px;

    border-bottom: 2px solid #636369;

    margin-bottom: 30px;

    justify-content: space-between;

    h2{

        position: relative;

        left: 50px;

        top: -19px;

        font-size: 18px;

        color: #777777;

        font-family: "Lucida Console", "Courier New", monospace;

    }

    img{

        border-radius: 10px;

        height: 60px;

        width: 60px;

        margin-top: 5px;

        margin-right: 5px;

    }

    .allText{

        padding-top: 10px;

    }

}

.allBtn{

    display: flex;

    flex-direction: column;

    position: relative;

    top: -38px;

   

    button{

        margin-bottom: 5px;

        border-radius: 4px;

        border: 1px solid #6e6e6e86;

        background: #414141;

        font-size: 15px;

        padding: 0 1px;

        position: relative;

        top: 40px;

        left: 10px;

    }

}

.UseBag{

    display: flex;

}

и html

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do</title>
<link rel="stylesheet" href="/scss/style.css">
</head>

<body>
<section>
<div class="container">
<div class="toDo">
<img src="https://nztcdn.com/avatar/l/1697362284/2782162.webp" alt="photo">
<div class="inputBox">
<input class="name" type="text" required="required">
<span>Имя</span>
</div>
<div class="inputBox">
<input class="surname" type="text" required="required">
<span>Фамилия</span>
</div>
<div class="inputBox">
<input class="face" type="text" required="required">
<span>фото URL лица</span>
</div>
<button class="btn-hover">Добавить</button>
</div>
<div class="list">
<div class="inner">
<h3>список людей</h3>
</div>
<div class="people">

</div>
</div>
</div>
</section>
<script src="/script.js"></script>
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
</body>

</html>

HTML

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>To do</title>

    <link rel="stylesheet" href="/scss/style.css">

</head>



<body>

    <section>

        <div class="container">

            <div class="toDo">

                <img src="https://nztcdn.com/avatar/l/1697362284/2782162.webp" alt="photo">

                <div class="inputBox">

                    <input class="name" type="text" required="required">

                    <span>Имя</span>

                </div>

                <div class="inputBox">

                    <input class="surname" type="text" required="required">

                    <span>Фамилия</span>

                </div>

                <div class="inputBox">

                    <input class="face" type="text" required="required">

                    <span>фото URL лица</span>

                </div>

                <button class="btn-hover">Добавить</button>

            </div>

            <div class="list">

                <div class="inner">

                    <h3>список людей</h3>

                </div>

                <div class="people">



                </div>

            </div>

        </div>

    </section>

    <script src="/script.js"></script>

    <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>

</body>



</html>