Как реализовать счетчик количества товара в карточке товара?

Question

No_name404 @No_name404

JavaScript

Как реализовать счетчик количества товара в карточке товара?

Здравствуйте, пытаюсь сделать счетчик количества товара.
С помощью php я делаю выборку по id и вывожу в итоге товар с помощью этого кода:

$(document).ready(function (){
    
init();
loadCart();
});

var cart={};

function init(){
    var hash = window.location.hash.substring(1);
    console.log(hash);
    $.post(
     'pages/adminPage/core.php',
    {
        "action":"loadSingleGoods",
        "id":hash
    },
    goodsOut
    );
}

function goodsOut(data){
    if(data!=0){
        var pack=JSON.parse(data);
        console.log(pack);
        var out="";
        for (key in pack) {
            
                    out+='<div class="col-lg-12 single">';
                        out+='<div class="col-lg-5 prod-slides">';
                            out+='<div id="sync1" class="owl-carousel owl-theme">';
                                out+='<div class="item">';
                                    out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                                out+='<div class="item">';
                                out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                                out+='<div class="item">';
                                    out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                            out+='</div>';
                            
                            out+='<div id="sync2" class="owl-carousel owl-theme">';
                                out+='<div class="item">';
                                    out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                                out+='<div class="item">';
                                    out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                                out+='<div class="item">';
                                    out+=`<img src="pages/orderPage/goods/${pack.img}">`;
                                out+='</div>';
                            out+='</div>';
                            
                        out+='</div>';
                        
                        out+='<div class="col-lg-5 prod-desc pull-right">';
                            out+=`<h1>${pack.name}</h1>`;
                            out+='<hr>';
                            out+=`<h3>${pack.cost} руб.</h3>`;
                            out+='<hr>';
                            out+=`<p>${pack.description}</p>`;
                            out+='<hr>';
                            out+='<div>';
                                out+='<a href="#" class="pull-left">';
                                        out+='<i class="fas fa-heart"></i>  Добавить в желаемое';
                                out+='</a>';
                            out+='</div>';
                            out+='<br>';
                            out+='<hr>';
                            out+='<div class="quant">';
                            for (var id in cart) {
                                out+=`<div class="val-min"><i data-id="${cart.id}" class="fas fa-minus"></i></div>`;
                                out+=`<div class="val"><span>${cart[id]}</span></div>`;
                                out+=`<div class="val-plus"><i data-id="${cart.id}" class="fas fa-plus"></i></div>`;            
                                out+='<a href="" data-id="${cart.id} class="ad-to-crt pull-right">Добавить в корзину</a>';
                            }
                            out+='</div>';
                        out+='</div>';
                    out+='</div>';
                }
        $.getScript("pages/productPage/js/slider.js");
        $('.goods-out').html(out);
        $('.minus-goods').on('click',minusGoods);
        $('.plus-goods').on('click', plusGoods);
        $('.add-to-cart').click(addToCart);
    }
    else{
        $('.goods-out').html("Такого товара не существует!");
    }
}

с помощью этих функций происходит манипуляция количества

function minusGoods() {
    //уменьшаем товар в корзине
    var id = $(this).attr('data-id');
    if (cart[id]==1) {
        delete cart[id];
    }
    else {
        cart[id]--;
    }
    saveCart();
    goodsOut();
}

function plusGoods(){
    //добавляет товар в корзине
    var id = $(this).attr('data-id');
    cart[id]++;
    saveCart();
    loadCart();
    
}

количество товара находится в переменной cart, которую я сохраняю затем в local storage:

var cart={};
function loadCart(){
    //проверяю есть ли в localStorage запись cart
    if(localStorage.getItem('cart')){
        //если есть расшифровываю и записваю в перемунную cart
        cart = JSON.parse(localStorage.getItem('cart'));
        }
        
        saveCart();
        console.log(cart);
}



function saveCart(){
    //сохраняю корзину в localStorage
    localStorage.setItem('cart',JSON.stringify(cart)); //корзину в строку
}

В итоге количество данного товара должно сохраняться в корзину.

function addToCart() {
    let id = $(this).attr('data-id');
     console.log(id);
    if (cart[id] === undefined) {
        cart[id] = 1;   // если в корзине нет товара с таким айди - делаем равным 1
    } else {
        cart[id]++; // если такой товар есть - увеличиваю на 1
    }
    showMiniCart();
    saveCart();
}

Подскажите пожалуйста,как это реализовать грамотно и в правильную ли сторону я мыслю вообще?