I'm modifying a draft website which is basically mde by storing data in local storage and fetching and rendering it. On the cart.html page input are created dynamically, depending upon how many packages are added in the cart.

There are 2 prices, one which is package's price (works totally fine) and the other one is Total price of all the items in cart, which doesn't seem to update and adds on values to the previous value. I'm not sure what I'm doing wrong but any help would be great!

I'm also attaching stackblitz to get better understanding of my application. Please readme if you want instructions

cart.html

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

JS: (Don't really have idea how to achieve)

$(".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