Корзина JS с базой данных Firebase в реальном времени

Question

Я пытаюсь создать корзину с ванильным JS. Проект должен выглядеть примерно так: ЭТО , но элементы должны быть отправлены в базу данных реального времени Firebase, а приложение должно быть CRUD. Ссылка на базу данных firebase: this . Я вставил то, над чем я работал до сих пор. Я создал динамическую таблицу с данными из моей базы данных Firebase.

Что я могу сделать, чтобы при нажатии кнопки «добавить в корзину» выбранный пользователем объект сохранялся в объекте корзины в базе данных? Потому что мне нужно будет их найти, когда я создам страницу оформления заказа, где мне нужно их отобразить. Кроме того, при работе с запасом предмета, когда я добавляю что-то в корзину, запас в выбранном предмете также должен изменяться в Firebase. Таким образом, если запас товара равен 300, а пользователь добавляет в корзину 100, запас пожарной базы должен показывать, сколько осталось товаров. Как я могу это сделать?

let getUrl = new URL(document.URL);
let firebaseId = getUrl.searchParams.get('id');

productData()
    .then(response => {
        if (response.status === 200)
            return response.json();
        else
            console.log(response.status);
    })
    .then(function (data) {
        product = data;
        drawDetails();
    })
    .catch(err => console.log(err));

function productData() {
    return fetch(`https://proiect-final-f676e.firebaseio.com/phones/${firebaseId}.json`, {
        method: 'GET'
    });
}


function drawDetails() {
    var html = `
    <div class="card" style="width: 50rem;">
    <img src="${product.image}" class="card-img-top">
    <div class="card-body">
    <h2 class="card-title">${product.name.toUpperCase()}</h2>
    <p class="card-text"><b>Description:</b>&nbsp${product.configuration}</p>
    </div>
    <ul class="list-group list-group-flush">
    <li class="list-group-item"><p><b>Price:</b>&nbsp${product.price}</p>
    </li>
    <li class="list-group-item"><p><b>Stock:</b>&nbsp${product.stock} items</p></li>
    </ul>
    <div class="card-body">
    <a href="#" class="card-link"><button class="bag-btn" data-id=${product.id} onclick="addToCart();"><i class="fas fa-shopping-cart">&nbspAdd to cart</i></button></a>
    </div>
    </div>
    `;
    document.querySelector('#content').innerHTML = html;
}

function ajax(method, url, body) {
    return new Promise(function (resolve, reject) {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText));
                } else {
                    reject(new Error("serverul a dat eroare"));
                }
            }
        };
        xhttp.open(method, url, true);
        xhttp.send(body);
    });
}

var url = "https://proiect-final-f676e.firebaseio.com/"
async function addToCart(id, quantity) {
    var arr = await Promise.all([
        await ajax("GET", url + "cart/" + id + ".json"),
        await ajax("GET", url + "phones/" + id + "/stock.json")
    ]);
    var cartQuantity = arr[0];
    var stock = arr[1];


    var cartQuantity = await ajax("GET", url + "cart/" + id + ".json");
    var stock = await ajax("GET", url + "phones/" + id + "/stock.json");

    if (cartQuantity === null) {
        cartQuantity = 0;
    }
    console.log(quantity, cartQuantity, stock);
    if (stock < quantity + cartQuantity) {
        quantity = stock;
    } else {
        quantity = quantity + cartQuantity;
    }
    await ajax("PUT", url + "cart/" + id + ".json", quantity);
}

* {
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  min-width: 476px;
}

header {
  background-color: black;
  width: 100%;
  height: 70px;
  font-size: 25px;
  color: white;
  position: relative;
  padding: 15px;
  overflow: hidden;
  min-width: 478px;
}
.button {
  float: right;
  font-size: 20px;
  color: white;
  border: none;
  background-color: black;
  width: 60px;
  right: 0;
  top: 0;
  box-sizing: border-box;
  text-transform: uppercase;
}

#textAnimation {
  font-size: 20px;
  color: white;
  border: none;
  background-color: black;
  width: 170px;
  display: inline-block;
  text-align: center;
}
#textAnimation span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#textAnimation span:after {
  content: "Categories";
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#textAnimation:hover span {
  padding-right: 25px;
}

#textAnimation:hover span:after {
  opacity: 1;
  right: 0;
}

#textAnimation:hover {
  color: lightgrey;
}

.button:hover {
  color: rgb(204, 197, 197);
}

img {
  width: 50%;
  height: auto;
}


.card{
  margin: 50px auto auto auto;
  border:1px solid lightgray;
  padding:10px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Shop</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://kit.fontawesome.com/2926c10e78.js" defer></script>    
</head>

<body>
    <div id="header">
        <header>
            <a href="index.html" style="text-decoration: none; color:white"><span><i class="fab fa-apple"></i>&nbspApple
                    Store</span></a>
            <button class="button">
                <i class="fas fa-shopping-cart"></i></button>
            <button class="button">
                <i class="fas fa-lock"></i><span></span></button>
            <a href="index.html"><button class="button" id="textAnimation"><span></span><i
                        class="fas fa-stream"></i></span></button></a>
        </header>
    </div>
    <a href="./phones.html" class="card-link"><button id="back">Back to the phones</button></a>
    <div id="content">
    </div>

</body>

</html>