JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inside">
<input type="hidden" name="save_input" value="true" />
<div class="options" data-layout="default" data-show="true" style="display:none"></div>
<div id="acf-job_bounty_amount" class="field field-number required">
<p class="label"><label for="fields[field_50216b02ae772]">Job Bounty Amount <span class="required">*</span></label></p>
<input type="number" step="any" value="2300" id="fields[field_50216b02ae772]" class="number" name="fields[field_50216b02ae772]" />
</div>
<div id="acf-job_bounties_commission" class="field field-calculation_field">
<p class="label"><label for="fields[field_5054963ac994c]">Job Bounties Commission</label></p>
<script>
jQuery('#acf-job_bounty_amount input').change(function() {
var value = jQuery(this).val();
jQuery('#fields[field_5054963ac994c]').val((value / 100) * 30);
});
</script>
<input type="text" readonly="readonly" value="690" id="fields[field_5054963ac994c]" class="calculation_field" name="fields[field_5054963ac994c]" data-field="job_bounty_amount" data-op="percent" data-calc="30" />
</div>
<div id="acf-job_bounties_total" class="field field-calculation_field">
<p class="label"><label for="fields[field_50560ba57e8dd]">Job Bounties Total</label></p>
<input type="text" readonly="readonly" value="2990" id="fields[field_50560ba57e8dd]" class="calculation_field" name="fields[field_50560ba57e8dd]" data-field="job_bounty_amount" data-op="percent" data-calc="130" />
</div>
</div>
JavaScript
jQuery('#acf-job_bounty_amount input').bind('keyup mouseup', function () {
var value = jQuery(this).val();
jQuery('#fields\\[field_5054963ac994c\\]').val((value / 100) * 130);
});