How to calculate customer amount using Ajax?

Question

AJAX

Good afternoon everyone :)

There was such a problem: there is an initial balance of the client, which is displayed on the page thanks to this code:

let getJson = {"balanse": 100000};
document.getElementById('header-item--balance').innerHTML = getJson.balanse;

There is an input into which the user displays the amount he wants to withdraw:

<form action="#" class="data-item__form">
              <h2 class="data-item__text" >Сумма</h2>
              <input type="number" name="sum" id="sum" autocomplete="off" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>

And also there is a button that displays these funds.
You need to make sure that the code, each time you click on the "Withdraw" button, recalculates and changes the balance in this code:

let getJson = {"balanse": 100000};
document.getElementById('header-item--balance').innerHTML = getJson.balanse;

The main rule - you can not go into the red, if there is not enough money for withdrawal - display a message.
How can this be implemented?
All code:
HTML

<form action="#" class="data-item__form">
              <h2 class="data-item__text" >Сумма</h2>
              <input type="number" name="sum" id="sum" autocomplete="off" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>

JS

let btn = document.querySelector('.btn');
const form = document.querySelector('.data-item__form');
let inputs = document.querySelectorAll('input');

 btn.addEventListener('click', () =>{
        function getCheck(){
            if (getKey() != "" && check.checked){
                console.log('click')
                btn.disabled = false;

                const user = [...document.querySelectorAll('input')].reduce((user, el) => {
                    user[el.name] = el.value;
                    return user;
                }, {}); 
                
                getData(); 
                btnClear();
                //document.querySelectorAll('.table-container__data').innerHTML = JSON.stringify(user, null, '');
                
            } else {
                btn.disabled = true;
            }
        }
            getCheck()
    });

  let xTable = document.getElementById('TableforData');
      let tr = document.createElement('tr');
      tr.innerHTML = '<td>' + item_sum + '</td><td>' + item_number + '</td><td>' + item_name + '</td><td>' +  item_date + '</td><td>' + item_cvv +'</td>';
      xTable.children[0].appendChild(tr);

const btnClear = () => {
    for (let i = 0; i < inputs.length; i++) {
       if(i) {
        inputs[i].value = "";
       } 
    }
};

I understand that this can be somehow implemented using classes, but I cannot fully understand exactly how this can be done.
Here's the frame I drew:

class Balance {

    get balance() {
        return
    }
    set()
    add()
}

balanse = new Balance()



class Money {
    amount: 100000,
}

balanse.fetch()

Thank you very much in advance!