JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-group" id="rate">
    <span class="input-group-addon">Rate per day/hour</span>
    <input type="text" class="form-control" name="rate_inp" id="calc_rate_inp" />
    <input type="hidden" name="rate" id="calc_rate" />
</div>
<div class="input-group" id="bill-costs">
    <span class="input-group-addon">Billable costs</span>
    <input type="text" class="form-control" name="bill_costs_inp" id="bill_costs_inp" />
    <input type="hidden" name="bill_costs" id="bill_costs" />
</div>

JavaScript

$('document').ready(function() {
    $('.input-group input').on('keyup blur focusout',function() {
        if($(this).val() !== '') {
            inputValue = $(this).val();
            inputValue = inputValue.replace(',', '.');
            inputValue = parseFloat(inputValue) * 100;
            integerValue = parseInt(inputValue);
            $(this).siblings('input:hidden').val(integerValue);
        }
    });
});