Замените товар в корзине и рассчитайте общую стоимость только с помощью JavaScript

Question

Я пытался выполнить процедуру через скрипт, где я хотел бы сделать некоторые исправления, некоторые из них, когда вы добавляете продукты, он не добавляет один за другим, а заменяет его и добавляет к количеству продуктов. Кроме того, я бы добавил кнопку, которая, если вы щелкнете по ней, генерирует функцию, в которой вычисляется общая стоимость корзины, но я не могу достичь указанных примеров. Я приложил HTML и JavaScript, чтобы посмотреть, сможете ли вы мне помочь:

    var arrayProductos;
    var cantidad=1;
    var arrayCesta=[];
     
     function inicio(){
         producto();
     }
     
     
     function Producto(idProducto, nombreProducto, cantidad, precio){
         this.idProducto= idProducto;
         this.nombreProducto = nombreProducto;
         this.cantidad = cantidad;
         this.precio = precio;
     
     }
     
     function producto(){
         var placa = new Producto("0", "Placa base Gigabyte GA-H110M-S2H", 1,"42,14");
         var ssd = new Producto("1","Disco duro Kingston A-400 SSD 480GB", 1,"45,45");
         var ram = new Producto("2","Memoria RAM DDR4 Corsair Vengeance LPX 3000 Mhz", 1,"69,12");
         arrayProductos = [placa, ssd, ram];
        for (i = 0; i < arrayProductos.length; i++) {
              document.getElementById("tablaProductos").innerHTML+="<tr><td>"+arrayProductos[i].nombreProducto+"</td> <td>"+arrayProductos[i].cantidad+"</td> <td>"+arrayProductos[i].precio+"</td><td><input type='button' onclick='anadir("+i+")'  size='50' name='btnAnadir'></input></td></tr>";
     
         }
     
     }
     
     function anadir(i){
         arrayCesta.push(i);
         acumulador="<tr><td>Producto</td><td>Cantidad cesta</td><td>Precio unitario</td><td>Precio total</td><td></td></tr>";
         for (var p = 0; p < arrayCesta.length; p++) {
               document.getElementById("cesta").innerHTML+=arrayCesta[p];
     
             acumulador+="<tr id='lin_"+p+"'><td>"+arrayProductos[arrayCesta[p]].nombreProducto+"</td> <td id='cantidad'>"+arrayProductos[arrayCesta[p]].cantidad+"</td> <td>"+arrayProductos[arrayCesta[p]].precio+"</td><td><input type='button' onclick='quitarDeCesta("+p+");'  size='50' value='Eliminar'></td></tr>";
         }
         document.getElementById("cesta").innerHTML=acumulador;
    }
     function quitarDeCesta(i){
    	 arrayCesta.splice(i, 1);
    	 var quita_p_cesta= document.getElementById("lin_"+i);
    	 quita_p_cesta.parentNode.removeChild(quita_p_cesta);
     
     }

            <div id="products" class="productos">
     
                            <table id="tablaProductos"  class="tabla">
                                <tr>
                                    <td>Producto</td>
                                    <td>Cantidad</td>
                                    <td>Precio</td>
     
                                </tr>
                            </table>
     
                <table align="center" border="2" id="cesta" class="cesta">
                    <tr>
                        <td>Producto</td>
                        <td>Cantidad cesta</td>
                        <td>Precio unitario</td>
                        <td>Precio total</td>
                    </tr>
                </table>
     
            </div>