Estoy modificando un borrador de sitio web que básicamente se realiza almacenando datos en el almacenamiento local y buscándolos y renderizándolos. En la página cart.html , las entradas se crean dinámicamente, dependiendo de cuántos paquetes se agreguen al carrito.

Hay 2 precios, uno que es el precio del paquete (funciona totalmente bien) y el otro es el precio total de todos los artículos en el carrito, que no parece actualizarse y agrega valores al valor anterior. No estoy seguro de lo que estoy haciendo mal, ¡pero cualquier ayuda sería genial!

También adjunto stackblitz para comprender mejor mi aplicación. Léame si desea instrucciones

carrito.html

 <div class="totalPrice"> <table> <tr> <td>Total Price</td> <td id="totalPriceCount" data-total=""></td> </tr> </table> </div>

JS: (Realmente no tengo idea de cómo lograrlo)

 $(".myInput").on('input', function () { varCurrentVal = this.value; if (varCurrentVal == 0) { return; } var closestSibAttr = $(this).parent().parent().find("#quantityBasedPrice").attr("data-val"); $(this).parent().parent().find("#quantityBasedPrice").html(varCurrentVal * closestSibAttr).attr("data-total", varCurrentVal * closestSibAttr); // code to update #totalPriceCount to sum all the values into the Total Price })

Stackblitz : https://stackblitz.com/edit/web-platform-8cynxp?file=turkey.html