JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>
<tr>
<td align="center" valign="top">
<input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" maxlength="2" />
</td>
<td align="left" valign="top"><span class="text10">Test</span></td>
<td align="right" valign="top" id="price_item_1"><span class="text10">36</span></td>
<td align="center" valign="top"><a name="add1">add</a></td>
</tr>

<br>

<tr>
<td align="center" valign="top">
<input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" maxlength="2" />
</td>
<td align="left" valign="top"><span class="text10">Test</span></td>
<td align="right" valign="top" id="price_item_2"><span class="text10">12</span></td>
<td align="center" valign="top"><a name="add2">add</a></td>
</tr>

<br><br>

If you press on "add", a jQuery function adds the following div to div#cart:
the last 2 spans ([name^=tix] and [name^=tick]) are just for the "interim" calculation. they'll get hidden with css display:none, if the whole thing works.

<br><br>

<div id="cart">
<span class="rg" name="rgtickettotal"></span>

<div id="1"><span class="qty1">3</span>x Ticket1 <span class="rg" name="rgtix1"></span> <span class="rg" name="tick1">3</span></div>

<div id="2"><span class="qty2">5</span>x Ticket2 <span class="rg" name="rgtix2"></span> <span class="rg" name="tick2">5</span></div>

</div>

JavaScript

$.Calculation.setDefaults({
    reNumbers: /(-?\$?)(\d+(\.\d{3})*(,\d{1,})?|,\d{1,})/g
    , cleanseNumber: function (v){
        return v.replace(/[^0-9,\-]/g, "").replace(/,/g, ".");
    }
});

function formatMoney(n, c, d, t){
         var c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
      };

function spantixcalc(){
$("span[name^=rgtix]").calc(
    "qty * price",
    {
        qty: $("span[name^=tick]"),
        //if [name=tick1] -> price: 36,00 ; else if [name=tick2] -> price 12,00
        price: $("[id^=price_item_]")
    },
    function (s){
        return formatMoney(s, 2, ",", ".") + " EUR";
    },
    function ($this){
        var sum = $this.sum();
        
        $("span[name=rgtickettotal]").text(
            formatMoney(sum, 2, ",", ".") + " EUR"
        );
    }
);
}
                                 
 spantixcalc();