im.ask.how. add update btn help ??javascript

I ask how add button update **here

>     **
>     
>     
>     var productNameInput = document.getElementById("productName");//input 
>     var productPriceInput = document.getElementById("productPrice");//input saeed
>     var productDescInput = document.getElementById("productDesc");//input k
>     var productCategoryInput = document.getElementById("productCategory");
>     
>     var productsContainer;
>     if (localStorage.getItem("productsList") == null)
>     {
>         productsContainer = [];
>     }
>     else {
>         productsContainer = JSON.parse(localStorage.getItem('productsList'));
>         displayProducts();
>     }
>     function addProduct() {
>     
>     
>         var product = {
>     
>             name: productNameInput.value,
>             price: productPriceInput.value,
>             category: productCategoryInput.value,
>             desc: productDescInput.value
>         }
>         productsContainer.push(product);
>         localStorage.setItem("productsList", JSON.stringify(productsContainer));
>         // clearForm();
>         displayProducts();
>     
>     }
>     
>     function clearForm() {
>         productNameInput.value = "";
>         productPriceInput.value = "";
>         productCategoryInput.value = "";
>         productDescInput.value = "";
>     
>     }
>     
>     
>     
>     function displayProducts() {
>     
>         var cartoona = ``;
>         for (var i = 0; i < productsContainer.length; i++) {//3
>             cartoona += `<tr>
>             <td>${i}</td>
>             <td>${productsContainer[i].name}</td>
>             <td>${productsContainer[i].price}</td>
>             <td>${productsContainer[i].category}</td>
>             <td>${productsContainer[i].desc}</td>
>             <td> <button class="btn btn-outline-warning">update</button></td>
>             <td> <button onclick="deleteProducts(${i})" class="btn btn-outline-danger">delete</button></td>
>         </tr>`;
>         }
>         document.getElementById("tableBody").innerHTML = cartoona;
>     }
>     
>     
>     
>     
>     function searchProducts(term) {
>         var cartoona = ``;
>         for (var i = 0; i < productsContainer.length; i++) {
>     
>             if (productsContainer[i].name.toLowerCase().includes(term.toLowerCase())
> == true) {
>                 cartoona += `<tr>
>                 <td>${i}</td>
>                 <td>${productsContainer[i].name}</td>
>                 <td>${productsContainer[i].price}</td>
>                 <td>${productsContainer[i].category}</td>
>                 <td>${productsContainer[i].desc}</td>
>                 <td> <button class="btn btn-outline-warning">update</button></td>
>                 <td> <button  onclick="deleteProducts(${i})" class="btn btn-outline-danger">delete</button></td>
>             </tr>`;
>             }
>         }
>         document.getElementById("tableBody").innerHTML = cartoona;
>     }
>     
>     
>     function deleteProducts(index) {
>         productsContainer.splice(index , 1);
>         displayProducts();
>         localStorage.setItem("productsList", JSON.stringify(productsContainer));
>       }
>     
>     //    deleteProducts(5);