JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<a id="sum" href="#">Sum</a> <span id="sum-value"></span>
<!-- repeat start -->
<div class="item">
    amount: <br />
    <input type="text" class="amounts" />
    price: <br />
    <input type="text" class="price0" />
</div>
<div class="item">
    amount: <br />
    <input type="text" class="amounts" />
    price: <br />
    <input type="text" class="price1" />
</div>
<div class="item">
    amount: <br />
    <input type="text" class="amounts" />
    price: <br />
    <input type="text" class="price2" />
</div>
<!-- repeat end -->

CSS

input {
    padding: 5px 10px;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.item {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
}

JavaScript

$("#sum").click(function(){
    var sum = 0;
    
    $(".amounts").each(function(index){
        curAmounts = $(this).val();
        curPrice = $('.price'+index).val();
        curSum = curAmounts * curPrice;
        sum = sum + curSum;
    });
    
    $("#sum-value").html(sum);
});