JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<input id="num1" type="text" />
<input id="num2" type="text" />
<input id="num3" type="text" />
<div id="total"></span>
<input id="num4" type="text" />
<input id="num5" type="text" />
<div id="total2"></span>

JavaScript

function total(){
    var num1 = $("#num1").data("kendoNumericTextBox").value(),
       num2= $("#num2").data("kendoNumericTextBox").value(),
        num3= $("#num3").data("kendoNumericTextBox").value(),
        sum= num1+num2+num3;
    $("#total").text(kendo.toString(sum,"c2"));
        
}

$(function(){
    $("#num1, #num2, #num3").kendoNumericTextBox({
        format: "c2"
    });
    
    $("#num1").data("kendoNumericTextBox").bind("change", function(e){
        total();
    });
     $("#num2").data("kendoNumericTextBox").bind("change", function(e){
        total();
    });
    $("#num3").data("kendoNumericTextBox").bind("change", function(e){
        total();
    });
                                                
});