How to implement a counter of the item quantity in the item card?

Hello, trying to do a count of the number of goods.
Using php I make a selection by id and put in the end product with this code:
$(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
);
}

goodsOut function(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} RUB</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> Add to the desired';
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">add to cart</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("This product does not exist!");
}
}


with these changes the manipulation amount

minusGoods function() {
 //decrement item in cart
 var id = $(this).attr('data-id');
 if (cart[id]==1) {
 delete cart[id];
}
 else {
cart[id]--;
}
saveCart();
goodsOut();
}

plusGoods function(){
 //adds the item to the basket
 var id = $(this).attr('data-id');
cart[id]++;
saveCart();
loadCart();

}


the quantity of the item is in the cart variable, which I then save in local storage:
var cart={};
loadCart function(){
 //check whether localStorage entry cart
if(localStorage.getItem('cart')){
 //if there decode and zapishu in peremennoy cart
 cart = JSON.parse(localStorage.getItem('cart'));
}

saveCart();
console.log(cart);
}



function saveCart(){
 //save the cart to localStorage
 localStorage.setItem('cart',JSON.stringify(cart)); //cart in line
}


In the end, the quantity of the item is to be stored in the basket.
function addToCart() {
 let id = $(this).attr('data-id');
console.log(id);
 if (cart[id] === undefined) {
 cart[id] = 1; // if in the cart there is no item with the same ID - make equal to 1
 } else {
 cart[id]++; // if this product is increases 1
}
showMiniCart();
saveCart();
}


Please tell me how to implement it correctly and in the right way I think at all?
March 12th 20 at 07:57
1 answer
March 12th 20 at 07:59
So what's the question? Code does not work? Or what???

one error at least, then fell asleep in your sheets))

- goodsOut

+ goodsOut();
@chet_Bernhard, ahah, the question is whether I'm doing? and if not, how to do for this task? - Lazaro_Rodriguez commented on March 12th 20 at 08:02

Find more questions by tags jQueryJavaScript