Вероника Катаева @peachferris

Как рассчитать сумму клиента с помощью Ajax?

Всем добрый день :)

Возникла такая проблемка: есть начальный баланс клиента, который выводится на страницу благодаря этому коду:

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

Есть инпут, в который пользователь выводит сумму, которую он хочет вывести:

<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>

А также есть кнопка, которая выводит эти средства.
Нужно сделать так, чтобы код при каждом нажатии на кнопку "Вывести" делал перерасчёт и изменял баланс в этом коде:

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

Главное правило -нельзя уходить в минус, если денег не хватает для вывода - вывести сообщение.
Как это можно реализовать?
Весь код:
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>

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 = "";
       } 
    }
};

Понимаю, что это можно как-то реализовать с помощью классов, но не могу понять до конца как именно это можно сделать.
Вот какой каркас я набросала:

class Balance {

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

balanse = new Balance()



class Money {
    amount: 100000,
}

balanse.fetch()

Заранее огромное спасибо!