JSFiddle - React, Tailwind, and code Playground

by adishardis

HTML

<table>
    <thead>
        <tr>
            <th>Quantity</th>
            <th>&nbsp;</th>
            <th>Price</th>
            <th>Sum</th>
        </tr></thead>
    <tbody>
        <tr class="sum">
            <td><input class="qty" type="text" value="1" /></td>
            <td>German format: </td>
            <td data-price="1375.5">1.375,50 &euro;</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input class="qty" type="text" value="1" /></td>
            <td>English format:</td>
            <td data-price="1375.5">&euro;1,375.50</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input name="text" type="text" class="qty" value="1" /></td>
            <td>French format:</td>
            <td data-price="1375.5">1 375,50 &euro;</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input name="text2" type="text" class="qty" value="1" /></td>
            <td>Italian format:</td>
            <td data-price="1375.5">&euro;1,375.50</td>
            <td></td>
        </tr>
        <tr class="sum">
            <td><input class="qty" type="text" value="1" /></td>
            <td>Spanish format:</td>
            <td data-price="1375.5">&euro; 1.375,50</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">Total</td>
            <td id="total"></td>
        </tr>
    </tbody>
</table>

JavaScript

var addup = function() {
    var sum = 0;
    $('.sum').each(function() {
        var q = parseFloat($(this).find('.qty').val());
        var p = parseFloat($(this).find('td').eq(2).data('price'));
        
        var mul = p * q;
        sum += mul;
        $(this).find('td').last().text(mul);
    });
    $('#total').text(sum);
};

addup();
$('.qty').change(addup);