JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input class="calcValue" data-calcvaluestart="10,32" value="" data-calcvaluetotal=".totalValue"/>
<p>Totaal bedrag: &euro;<span class="totalValue"></span></p>

CSS

body{margin:20px;}

JavaScript

$.fn.calcValue = function(list) {
    return this.each(function() {
        var $this = $(this);
        var totalValueTotal = $this.attr("data-calcvaluetotal")
        var calcvaluestart  = $this.data('calcvaluestart');
        $(totalValueTotal).text(calcvaluestart);
        
        $this.on('change', function () {
            var calcValueStartKeyup = parseFloat($this.data('calcvaluestart').replace(',','.'));
            var calcValueInput = parseFloat($this.val().replace(',','.') || 0);   
            var totalValue = parseFloat(calcValueStartKeyup + calcValueInput).toFixed(2).replace('.',',');
            $(totalValueTotal).text(totalValue);
            return false;
        }).keyup( function () {
            $(this).change();
        });
    });
};

$('.calcValue').calcValue();