JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
<body class="app">

<label>Val 1</label>
<div class="ml-auto"><input type="number" value="10000" class="input barangx" readonly step="0.01" id="id_form-0-total"></div>

<label>Val 2 - Change this fieild to 1000000</label>
<div><input type="number" value="10000" class="input barangx" step="0.01"></div>

<label>Val 1 + Val 2=</label>
<input type="number" name="total" step="0.01" class="input totalx" readonly required id="id_total">

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script type="text/javascript">
$(document).ready(function(){
$(".barangx").keyup(function(){
    var totalsum = 0;
    $(".barangx").each(function(){
        var inputval = $(this).val();
        inputval = inputval.replace(/,/g, "");
        if($.isNumeric(inputval)){
            totalsum +=parseFloat(inputval);
        }
    });
    totalsum = totalsum.toLocaleString('id-ID');
    $('.totalx').val(totalsum);
});
});
</script>
    </body>
</html>