ما المشكلة في الكود التالي

let title = document.getElementById('title');
let price = document.getElementById('price');
let taxes = document.getElementById('taxes');
let ads = document.getElementById('ads');
let discount = document.getElementById('discount');
let total = document.getElementById('total');
let count = document.getElementById('count');
let category = document.getElementById('category');
let submit = document.getElementById('submit');

function getTotal() {

    if (price.value != '') {
        let result = (+price.value + +taxes.value + +ads.value)
            - +discount.value;
        total.innerHTML = result;
        total.style.background = '#040';

    } else {
        total.innerHTML = '';
        total.style.background = '#a00';


    }
}

function updataData() {

}




let dataPro;
if (localStorage.product != null) {
    dataPro = JSON.parse(localStorage.product)
} else {
    dataPro = [];
}


submit.onclick = function () {
    let newPro = {

        title: title.value,
        price: price.value,
        taxes: taxes.value,
        ads: ads.value,
        discount: discount.value,
        total: total.innerHTML,
        count: count.value,
        category: category.value,
    }

    dataPro.push(newPro);
    localStorage.setItem('product', JSON.stringify(dataPro))

    clearData()
    showData()
}



function clearData() {

    title.value = '';
    price.value = '';
    taxes.value = '';
    ads.value = '';
    discount.value = '';
    total.innerHTML = '';
    count.value = '';
    category.value = '';
}
function showData() {
    let table = '';
    for (let i = 0; i < dataPro.length; i++) {
        table += `
         <tr>
                                    <td>${i}</td>
                                    <td>${dataPro[i].title}</td>
                                    <td>${dataPro[i].price}</td>
                                    <td>${dataPro[i].taxes}</td>
                                    <td>${dataPro[i].ads}</td>
                                    <td>${dataPro[i].discount}</td>
                                    <td>${dataPro[i].category}</td>
                                    <td>${dataPro[i].total}</td>
                                    <td><button id="updat">update</button></td>
                                    <td><button onclick="deleteData(${i})" id="delete" onclick="deleteData(i)">delete</button></td>
                                </tr>
        `
        console.log(table)
    }

    document.getElementById('tbody').innerHTML = table;
    let btnDelete = document.getElementById('deleteAll');
    if (dataPro.length > 0) {
        btnDelete.innerHTML =
            <button onclick="deletAll()"> delete All</button>
    } else {
        btnDelete.innerHTML = '';
    }
}
howData()
function deleteData(i) {
    console.log(i)

}

function deletAll() {
    localStorage.clear()
    dataPro.splice(0)
    showData()
}

jj.jsstyle.css

index.html