Проблемы с добавлением строк и стилем CSS

Question

Привет всем, всего несколько вопросов - как уже упоминалось в предыдущих постах, я новичок в JS. Я просто пытаюсь сделать несколько простых вещей, но, похоже, не работает.

1) Когда я вставляю код html в свой JS - стили не соблюдаются 2) Я не могу добавить новую строку описания элемента при добавлении нового элемента из sotre 3) Обновление итоги корзины работают отлично, я просто не могу заставить ее применить к div с общей суммой 4) Я не могу обновить div "amount"

let carts = document.getElementsByClassName('add-item');

let products = [{
        name: 'PERICO WHITE TEE',
        tag: 'tsaf1',
        price: 50,
        inCart: 0
    },

    {
        name: 'PERICO WHITE TEE',
        tag: 'tsaf1',
        price: 50,
        inCart: 0
    },

    {
        name: 'OBSIDIAN 1s',
        tag: 'OBSIDIAN',
        price: 390,
        inCart: 0
    },
]

for (let i = 0; i < carts.length; i++) {
    carts[i].addEventListener('click', () => {
        cartNumbers(products[i]);
        totalCost(products[i]);
    })
}


function onLoadCartNumbers() {
    let productNumbers = localStorage.getItem('cartNumbers');
    if (productNumbers) {
        var test = document.querySelector('.fa-shopping-cart span').textContent = productNumbers;
    }
}

function cartNumbers(product) {
    let productNumbers = localStorage.getItem('cartNumbers');
    productNumbers = parseInt(productNumbers);

    if (productNumbers) {
        localStorage.setItem('cartNumbers', productNumbers + 1);
        document.querySelector('.fa-shopping-cart span').textContent = productNumbers + 1;
    } else {
        localStorage.setItem('cartNumbers', 1);
        document.querySelector('.fa-shopping-cart span').textContent = 1;
    }

    setItems(product)
}

function setItems(product) {

    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems)
    console.log("My cartItems are", cartItems);

    if (cartItems != null) {

        if (cartItems[product.tag] == undefined) {
            cartItems = {
                ...cartItems,
                [product.tag]: product
            }
        }
        cartItems[product.tag].inCart += 1;
    } else {
        product.inCart = 1;
        cartItems = {
            [product.tag]: product
        }
    }
    localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

function totalCost(product) {
    // console.log("price is", products.price);
    let cartCost = localStorage.getItem('totalCost');
    console.log("My Cart Cost is", cartCost);
    console.log(typeof cartCost);

    if (cartCost != null) {
        cartCost = parseInt(cartCost);
        localStorage.setItem("totalCost", cartCost + product.price);
    } else {
        localStorage.setItem("totalCost", product.price);
    }
}

function displayCart() {
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems)
    let productContainer = document.querySelector('.item-description');

    let cartCost = localStorage.getItem('totalCost');

    if (cartItems && productContainer) {
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML +=
            `
            <div class="item-description">
            <span class="flex-grow-1">
                <img class="item-image" src="./resources/images/${item.tag}.png" alt="">
                <button class="remove-item">REMOVE</button>
            </span>
            <span class="flex-grow-1">${item.name}</span>
            <span class="price">$${item.price}</span>
            <input type="number" name="quantity" class="quantity" value="">
            <span class="total">$${item.inCart * item.price}</span>
        </div>
            `
        });

        productContainer.innerHTML +=
            `
            <span class="total-amount">$${cartCost}.00</span>
        `
    }
}

onLoadCartNumbers();
displayCart();

<div class="store-container">
        <div class="cart-headline">
            <h3>ITEMS IN YOUR CART</h3>
        </div>
        <div class="cart-description">
            <span class="flex-grow-1">Product</span>
            <span>Price</span>
            <span>Quantity</span>
            <span>Total</span>
        </div>
        <!--PRODUCTS-->
        <!--
        <div class="item-description">
            <span class="flex-grow-1">
                <img class="item-image" src="./resources/images/tsaf1.png" alt="">
                <button class="remove-item">REMOVE</button>
            </span>
            <span class="flex-grow-1">PERICO WHITE TEE</span>
            <span class="price"></span>
            <input type="number" name="quantity" class="quantity" value="">
            <span class="total"></span>
        </div>


        <div class="item-description">
            <span class="flex-grow-1">
                <img class="item-image" src="./resources/images/tsaf1.png" alt="">
                <button class="remove-item">REMOVE</button>
            </span>
            <span class="flex-grow-1">PERICO WHITE TEE</span>
            <span class="price"></span>
            <input type="number" name="quantity" class="quantity" value="">
            <span class="total"></span>
        </div>
    -->

        <div class="item-description">

        </div>

        <!--CHECKOUT DETAILS-->

        <div class="checkout-details">
            <div class="total-cost">
                <span>Total</span>
            </div>
            <span class="total-amount"></span>
        </div>
        <div class="taxes">
            <span>Shipping & taxes calculated at checkout</span>
        </div>