How do I get the input value and calculates rightaway? [closed]

I have an HTML file where I’d like to perform calculations as the user enters input, updating the results dynamically. but the function seems like it is not updating the tax Amount value, have similar functions for other fields all of the fields are working just due tax does not do anything

const taxAmountsInput = document.getElementById('taxAmount');
const dueTaxInput = document.getElementById('dueTax');
const dueTaxHiddenInput = document.getElementById('dueTaxHidden');

function updateDueTax() {
  const taxAmount = parseFloat(taxAmountsInput.value) || 0;
  const TotalDueTax = taxAmount * 0.05;
  dueTaxInput.value = TotalDueTax.toFixed(2);
  dueTaxHiddenInput.value = TotalDueTax.toFixed(2);
}
taxAmountsInput.addEventListener('input', updateDueTax);
updateDueTax();

<div class="row">
  <div class="col-md-3 mb-3">
    <label for="examptions" class="form-label">Exampltions</label>
  </div>
  <div class="col-md-3 mb-3 input-group" style="width: 75%">
    <span class="input-group-text custom-label" id="basic-addon1">270</span>
    <input type="text" class="form-control" id="examptions" name="examptions" required>
  </div>
</div>
<div class="row">
  <div class="col-md-3 mb-3">
    <label for="taxAmount" class="form-label">Lable Tax Amount</label>
  </div>
  <div class="col-md-3 mb-3 input-group" style="width: 75%">
    <span class="input-group-text custom-label" id="basic-addon1">280</span>
    <input readonly style="background-color: #e5f1f6;" type="text" class="form-control" id="taxAmount" name="taxAmount" required>
    <!-- Hidden input field to store the calculated taxAmout -->
    <input type="hidden" id="taxAmountHidden" name="taxAmountHidden">
  </div>
</div>
<div class="row">
  <div class="col-md-3 mb-3">
    <label for="taxRate" class="form-label">Tax Rate</label>
  </div>
  <div class="col-md-9 mb-3">
    <lable class="form-control" id="taxRate" name="taxRate"> %5</lable>
  </div>
</div>
<div class="row">
  <div class="col-md-3 mb-3">
    <label for="dueTax" class="form-label">Due Tax</label>
  </div>
  <div class="col-md-3 mb-3 input-group" style="width: 75%">
    <span class="input-group-text custom-label" id="basic-addon1">290</span>
    <input readonly style="background-color: #e5f1f6;" type="text" class="form-control" id="dueTax" name="dueTax" required>
    <!-- Hidden input field to store the calculated taxAmout -->
    <input type="hidden" id="dueTaxHidden" name="dueTaxHidden">
  </div>
</div>
</div>

I am not able to get the value of tax amount after entered