i’m trying to make an edit function in crud using js and i can’t make it the problem is that the row doesn’t update when i click on the edit button the info appears in the input fields again but when i click update it adds it as a new row and not update the existing one

here’s the html

 <div class="form">
        <div>
            <label for="name">Movie Name</label>
            <input type="text" id="name" >
        </div>
        <div>
            <label for="year">Realse Year</label>
            <input type="number" id="year">
        </div>
        <div>
            <label for="genre">Genre</label>
            <input type="text"  id="genre">
        </div>
        <div>
            <button type="submit" onclick="addMovie()" id="add"> Add </button>
        </div>
    </div>
    <div class="container">
        <input type="search" placeholder="search by name" name="search" id="search">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Year</th>
                    <th>Genre</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody id="showData"></tbody>
        </table>

and the JS

//form inputs
const movieName = document.getElementById('name')
const movieYear = document.getElementById('year');
const movieGenre = document.getElementById('genre');

const searchInput = document.getElementById('search')

const addBtn = document.getElementById('add')
//update

let movieContainer=[]
if(localStorage.getItem('movie')){
    movieContainer = JSON.parse(localStorage.getItem('movie'))
    display()
}

//add movie
function addMovie(){
    let movie = {
        name:movieName.value,
        year:movieYear.value,
        genre:movieGenre.value,
    }

    movieContainer.push(movie)
    localStorage.setItem('movie',JSON.stringify(movieContainer))
    display()
    clearMovie()

}
// display

function display(){
    let show=''
    for(let i = 0 ;i < movieContainer.length; i++){
        show += `
        <tr>
        <td>${movieContainer[i].name}</td>
        <td>${movieContainer[i].year}</td>
        <td>${movieContainer[i].genre}</td>
        <td><button onClick = 'update(${i})'<i class="fa-solid fa-pen-to-square" style="color: rgb(78, 50, 77)"></i></button></td>
        <td><button onClick ='deleteItem(${i})' <i class="fa-solid fa-delete-left" style="color:rgb(78, 50, 77) "></i></button></td>
        </tr>
        `
    }
    document.getElementById('showData').innerHTML=show;
}

//to clear

function clearMovie(){
    movieName.value=''
    movieYear.value=''
    movieGenre.value=''
}

function  deleteItem(index){
    movieContainer.splice(index,1)
    localStorage.setItem('movie',JSON.stringify(movieContainer))
    display()
}

//search

function search(text){
    let show=''
    for(let i = 0 ;i < movieContainer.length; i++){
    if(movieContainer[i].name.toLowerCase().includes(text.toLowerCase())){
        show += `
        <tr>
        <td>${movieContainer[i].name}</td>
        <td>${movieContainer[i].year}</td>
        <td>${movieContainer[i].genre}</td>
        <td><button onClick = 'update(${i})'  <i class="fa-solid fa-pen-to-square" style="color:rgb(78, 50, 77) ;"></i></button></td>
        <td><button onClick ='deleteItem(${i})' <i class="fa-solid fa-delete-left" style="color:rgb(78, 50, 77)" > </i></button></td>
        </tr>
        `
    }
    document.getElementById('showData').innerHTML=show;

    }

}

searchInput.addEventListener('input', () =>{search(searchInput.value)})


//update

function update(i){
    movieName.value=movieContainer[i].name
    movieYear.value=movieContainer[i].year
    movieGenre.value=movieContainer[i].genre

}

i tried using the splice method but it didn’t work