javascript – Modal popup wont edit

So I am making an attempt to arrange this popup after bill is printed the place operator can fill within the quantity supplied and it auto-calculates change.

<div id="payment-modal" class="modal">
  <div class="modal-box">
    <h3>Pagesa e Klientit</h3>
    <label for="paid-amount">Klienti Pagoi:</label><br>
    <enter id="paid-amount" sort="quantity" step="0.01" /><br>
    <label for="change-amount">Kusuri:</label><br>
    <enter id="change-amount" sort="textual content" readonly /><br>

    <div class="modal-actions">
      <button id="confirm-payment">✅ Konfirmo</button>
      <button id="cancel-payment">❌ Anulo</button>
    </div>
  </div>
</div>

  console.log("✅ Generated Bill:", filename);
  window.showPaymentModal(bill.complete, monedha.break up(' - ')[0]);
  
});


const modal = doc.getElementById('payment-modal');
const paidInput = doc.getElementById('paid-amount');
const changeOutput = doc.getElementById('change-amount');
const confirmBtn = doc.getElementById('confirm-payment');
const cancelBtn = doc.getElementById('cancel-payment');

window.showPaymentModal = (complete, forex = 'ALL') => {
  modal.model.show = 'flex';
  paidInput.worth="";
  changeOutput.worth = `0.00 ${forex}`;
  setTimeout(() => paidInput.focus(), 50);

  const updateChange = () => {
    const paid = parseFloat(paidInput.worth);
    const change = !isNaN(paid) ? (paid - complete).toFixed(2) : '0.00';
    changeOutput.worth = `${change} ${forex}`;
  };

  paidInput.removeEventListener('enter', updateChange); // clear earlier bindings
  paidInput.addEventListener('enter', updateChange);

  confirmBtn.onclick = () => {
    modal.model.show = 'none';
    location.reload(); // Or proceed to subsequent logic
  };

  cancelBtn.onclick = () => {
    modal.model.show = 'none';
  };
};

.modal {
  show: none;
  place: mounted;
  high: 0; left: 0;
  width: 100%; peak: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  justify-content: heart;
  align-items: heart;
  z-index: 9999;
}

.modal-box {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  width: 320px;
  text-align: heart;
}

.modal-box enter {
  width: 90%;
  padding: 0.5rem;
  font-size: 16px;
  margin-bottom: 1rem;
  border: 1px stable #ccc;
  border-radius: 8px;
  text-align: heart;
}

.modal-box enter:focus {
  border-color: #007aff;
  define: none;
}

.modal-actions {
  show: flex;
  hole: 1rem;
  justify-content: heart;
}

.modal-actions button {
  flex: 1;
  padding: 0.6rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: #007aff;
  coloration: white;
  cursor: pointer;
}

.modal-actions button#cancel-payment {
  background: #e0e0e0;
  coloration: #333;
}

The popup wont edit until I tab out and tab again in. I attempted simulating a spotlight out and focus in with no luck, I attempted a myriad of issues however no luck, anybody had the same expertise?