0

I would like to increase, decrease and remove items from my cart page but the buttons only work on the first items and the buttons increase the total amount of items in the cart instead of increasing the individual number of items.I would also like to decrease and increase the total amount as I press the buttons.What am I doing wrong? I'm also not sure why there is an error in my code snippet, there are none in my completed page.This is my github hosted page for the final result:my page

var carts = document.querySelectorAll(".cart-button");
var products = [
                {
                id: 1,
                name: "Brown Brim",
                image: "https://i.ibb.co/ZYW3VTp/brown-brim.png",       
                price: 25,
                inCart:0
            },
            {
                id: 2,
                name: "Blue Beanie",
                image: "https://i.ibb.co/ypkgK0X/blue-beanie.png",          
                price: 18,
                inCart:0
            },
            {
                id: 3,
                name: "Brown Cowboy",
                image: "https://i.ibb.co/QdJwgmp/brown-cowboy.png",             
                price: 35,
                inCart:0
            },
            {
                id: 4,
                name: "Grey Brim",
                image:"https://i.ibb.co/RjBLWxB/grey-brim.png", 
                price: 25,
                inCart:0
            },
            {
                id: 5,
                name: "Adidas NMD",
                image: "https://i.ibb.co/0s3pdnc/adidas-nmd.png",       
                price: 220,
                inCart:0
            },
            {
                id: 6,
                name: "Adidas Yeezy",
                image:"https://i.ibb.co/dJbG1cT/yeezy.png",
                price: 280,
                inCart:0
            },
            {
                id: 7,
                name: "Black Converse",
                image:"https://i.ibb.co/bPmVXyP/black-converse.png",
                price: 110,
                inCart:0
            },
            {
                id: 8,
                name: "Nike White AirForce",
                image:"https://i.ibb.co/1RcFPk0/white-nike-high-tops.png",
                price: 160,
                inCart:0
            },
            {
                id: 9,
                name: "Black Jean Shearling",
                image:"https://i.ibb.co/XzcwL5s/black-shearling.png",
                price: 125,
                inCart:0
            },
            {
                id: 10,
                name: "Blue Jean Jacket",
                image:"https://i.ibb.co/mJS6vz0/blue-jean-jacket.png",
                price: 90,
                inCart:0
            },
            {
                id: 11,
                name: "Grey Jean Jacket",
                image:"https://i.ibb.co/N71k1ML/grey-jean-jacket.png",
                price: 90,
                inCart:0
            },
            {
                id: 12,
                name: "Brown Shearling",
                image:"https://i.ibb.co/s96FpdP/brown-shearling.png",
                price: 165,
                inCart:0
            },
            {
                id: 13,
                name: "Blue Tanktop",
                image:"https://i.ibb.co/7CQVJNm/blue-tank.png", 
                price: 25,
                inCart:0
            },
            {
                id: 14,
                name: "Floral Blouse",
                image:"https://i.ibb.co/4W2DGKm/floral-blouse.png",
                price: 20,
                inCart:0
            },
            {
                id: 15,
                name: "Floral Dress",
                image:"https://i.ibb.co/KV18Ysr/floral-skirt.png",              
                price: 80,
                inCart:0
            },
            {
                id: 16,
                name: "Red Dots Dress",
                image:"https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png",
                price: 80,
                inCart:0
            },
            {
                id: 17,
                name: "Camo Down Vest",
                image:"https://i.ibb.co/xJS0T3Y/camo-vest.png", 
                price: 325,
                inCart:0
            },
            {
                id: 18,
                name: "Floral T-shirt",
                image:"https://i.ibb.co/qMQ75QZ/floral-shirt.png",              
                price: 20,
                inCart:0
            },
            {
                id: 19,
                name: "Black & White Longsleeve",
                image:"https://i.ibb.co/55z32tw/long-sleeve.png",           
                price: 25,
                inCart:0
            },
            {
                id: 20,
                name: "Pink T-shirt",
                image:"https://i.ibb.co/RvwnBL8/pink-shirt.png",        
                price: 25,
                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){
        document.querySelector(".item-count").textContent = productNumbers;
    }
 }
 function cartNumbers(product){
    
    let productNumbers = localStorage.getItem("cartNumbers");
    
    productNumbers = parseInt(productNumbers);
      if (productNumbers){
          localStorage.setItem("cartNumbers", productNumbers + 1);
          document.querySelector(".item-count").textContent = productNumbers + 1;
      }else {
        localStorage.setItem("cartNumbers", 1);
        document.querySelector(".item-count").textContent = 1;
      }
      setItems(product);
      
 }
 function setItems(product){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    
    if(cartItems !== null){
         if (cartItems[product.name] === undefined){
            cartItems = {
                ...cartItems,
                [product.name]:product
            }
         }
        cartItems[product.name].inCart += 1;
    }else{
        product.inCart = 1;
        cartItems = {
            [product.name]:product
        }
    }
    localStorage.setItem("productsInCart",JSON.stringify(cartItems));
 }
 function totalCost(product){
    

    var cartCost = localStorage.getItem("totalCost");
    

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

function displayCart(){
    var cartCost = localStorage.getItem("totalCost");
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    

    let productContainer = document.querySelector(".output");
    if( cartItems && productContainer ){
       productContainer.innerHTML = "";
       Object.values(cartItems).map(item =>{
        productContainer.innerHTML += `
        <div id="cartResult" class="cart-contain">
        <div class="cart-header">
        <div class="product">
        <img src=${item.image}>
        
        </div>
        <div class="description">
        <p >${item.name}</p></div>
        <div class="quantity">
        <button onclick="subtract()" class="add">&#x0003C;</button>
        <p class="in-cart" id="cartCount">${item.inCart}</p>
        <button onclick="add()" class="minus">&#x0003E;</button>
        </div>

        <div class="price"><p>N ${item.price}.00</p></div>
        <div class="remove"><button onclick="remove(cartResult)">&#x02A2F;</button></div>
        </div>

        </div>

        `
        ;
        
        
        
       }

       
       );
       productContainer.innerHTML += `
         <div class="total-container"><h3 class="total-title">TOTAL:</h3>
         <h3 class="total">${cartCost}</h3
         </div>
        ` 

       
       
    }
    
}
function remove() {
    let productNumbers = localStorage.getItem("cartNumbers");
  var myobj = document.querySelector("#cartResult");
  myobj.remove();
}
function add(cartCount)
{
  var increase = document.querySelector('.minus');
  let productNumbers = localStorage.getItem("item.inCart");
  productNumbers = parseInt(productNumbers);
      if (productNumbers){
          localStorage.setItem("item.inCart", productNumbers + 1);
          document.querySelector("#cartCount").textContent = productNumbers + 1;
      }else {
        localStorage.setItem("item.inCart", 1);
        document.querySelector("#cartCount").textContent = 1;
      }
      setItems();
      
}

function subtract(cartCount)
{ 
  var decrease = document.querySelector('.add'); 
  var productNumbers = localStorage.getItem("item.inCart");
  productNumbers = parseInt(productNumbers);
      if (productNumbers){
          localStorage.setItem("item.inCart", productNumbers - 1);
          document.querySelector("#cartCount").innerHTML = productNumbers - 1;
      }else {
        localStorage.setItem("item.inCart", 1);
        document.querySelector("cartCount").textContent = 1;
      }
      setItems();
      

}


 
 
 displayCart();
 onLoadCartNumbers();


       
   
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
*{
   box-sizing: border-box;
}
body{
    font-family: 'Open Sans Condensed', sans-serif;
    margin: 50px;
}
.shopping-icon{
    width: 24px;
    height: 24px;
}
.cart-icon .item-count{
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    bottom: 12px;
}
.cart-icon{
    color: #000;
    width: 45px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
header .option{
    width: 100%;
    height: 100%;
    margin-top: -50px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.collection-item {
    width: 22vw;
    height: 350px;
    align-items: center;
    position: relative;
}
.collection-page .items .collection-item {
    margin-bottom: 30px;
}
.collection-item .image {
    width: 100%;
    height: 95%;
    background-size: cover;
    background-position: 50%;
    margin-bottom: 5px;
    }
  .items{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    }
 .cart-button{
    position: relative;
    bottom: 110px;
    width: 80%; 
    justify-content: center;
    opacity: .7;
    left: 10%;
    right: 10%;
    visibility: hidden ;
    height: 50px;
    letter-spacing: .5px;
    line-height: 50px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15px;
    font-weight: bolder;
    cursor: pointer;

}
#inc{
    outline: none;
    border: none;
    margin-left: 0px;
    height: 15px;
    width: 10px;
    cursor: pointer;
    color: transparent;
    text-shadow: 0px 1px 0px #000;

}
 .collection-item:hover .cart-button{
   visibility: visible;
   opacity: .9;
   border: 1px solid #000;
}
.collection-item:hover .image{
    opacity: .7;
}
.cart-button:hover{
    background-color: #000;
    color: #fff;
    border:1px solid #000;
}
.collection-footer{
    display: flex;
    justify-content: space-between;
}
/*cart page*/
.cart-container{
    max-width: 650px;
    justify-content: space-around;
    margin: 0 auto;
    margin-top: 50px;
}
.cart-contain{
    max-width: 650px;
    justify-content: space-around;
    margin: 0 auto;
    margin-top: 50px;
}
.cart-heading{
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #000;
    margin: 0 auto; 
}
.cart-header{
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #000;
    margin: 0 auto; 
}

.product{
    width: 30%;

}
.product img{
    margin-top: 40px;
    height: 200px;
    width: 150px;

}
.description{
    width: 20%;
    display: flex;
    align-items: center;
}
.description p{
    font-size: 1.3rem;

}
.quantity{
    width: 30%;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-around;
    

}
.price{
    width: 20%;
    display: flex;
    align-items: center;
}
.price p{
    font-size: 1.3rem;

}
.remove{
    width: 20%;
    display: flex;
    align-items: center;
}
.in-cart{
    font-size: 1.3rem;
}
.add{
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
    border: none; 
    background-color: transparent;
    outline: none;

}
.minus{
    font-size: 30px;
    cursor: pointer;
    font-weight: bold;
    border: none; 
    background-color: transparent;
    outline: none;
}
.remove button{
    font-size:30px;
    cursor: pointer;
    border: none; 
    background-color: transparent;
    outline: none;
}
.test-warning{
    text-align: center;
    margin-top: 40px;
    font-size: 24px;
    color: red;
}
.total-container{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 10px 0;
}
.total-title{
    width: 20%;
}
.total{
    width: 10%;
}
.StripeCheckout{
    overflow: hidden; 
    display: inline-block; 
    background: linear-gradient(rgb(40, 160, 229), rgb(1, 94, 148)); 
    border: 0px; 
    padding: 1px; 
    text-decoration: none; 
    border-radius: 5px; 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; 
    cursor: pointer; 
    visibility: visible; 
    user-select: none;
    margin-left: 50%;
    margin-top: 50px;

}

    
<!DOCTYPE html>
<html>
<head>
    <title>CRWN Clothing</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript"src="index.js"></script>

</head>
<body>
    <header>
        <div class="logo">
            <a class="logo-container" href="index.html">
                <svg width="50px" height="39px" viewBox="0 0 50 39" class="logo"><title>Group</title><desc>Created with Sketch.</desc><g id="WiP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard" transform="translate(-90.000000, -38.000000)"><g id="Group" transform="translate(90.000000, 38.000000)"><polygon id="Rectangle" fill="#808282" points="3 14 25 26.5 47 14 40.855176 39 9.08421785 39"></polygon><polygon id="Triangle" fill-opacity="0.262838724" fill="#101A1A" points="25 8 40 39 10 39"></polygon><circle id="Oval" fill="#5E6363" cx="2" cy="9" r="2"></circle><circle id="Oval" fill="#5E6363" cx="25" cy="2" r="2"></circle><circle id="Oval" fill="#5E6363" cx="48" cy="9" r="2"></circle>
                </g></g></g>
                </svg>
            </a>
        </div>
        <div class="option" onclick="location.href='./cart.html'">
        <div class="cart-icon" onclick="location.href='./cart.html'">
            <svg id="Capa_1" x="0px" y="0px" viewBox="0 0 407.453 407.453" xml:space="preserve" class="shopping-icon"><g><path d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486 c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z" style="fill: rgb(1, 0, 2);"></path><path d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243 v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391 c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386 C375.191,103.891,371.557,100.258,367.062,100.258z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0 c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394 c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274 C274.461,131.163,278.095,134.796,282.59,134.796z" style="fill: rgb(1, 0, 2);"></path><path d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907 c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129 c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z" style="fill: rgb(1, 0, 2);"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
            <span class="item-count"> 0 </span>
        </div>
    </div>
    </header>
    <main>
     <div class="collection-page">
        <center><h1>Hats</h1></center>
            <div class="items">
        <div class="collection-item">
            <div class="image" style="background-image: url(&quot;https://i.ibb.co/ZYW3VTp/brown-brim.png&quot;);"></div><div class="collection-footer"><span class="name">Brown Brim</span><span class="price">N25</span></div>
            <button class="cart-button"  >Add to cart</button></div>
            <div class="collection-item">
                <div class="image" style="background-image: url(&quot;https://i.ibb.co/ypkgK0X/blue-beanie.png&quot;);"></div>
            <div class="collection-footer"><span class="name">Blue Beanie</span><span class="price">N18</span></div>
            <button class="cart-button"  >Add to cart</button></div>
            <div class="collection-item">
                <div class="image" style="background-image: url(&quot;https://i.ibb.co/QdJwgmp/brown-cowboy.png&quot;);"></div>
                <div class="collection-footer"><span class="name">Brown Cowboy</span><span class="price">N35</span>
                </div>
            <button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/RjBLWxB/grey-brim.png&quot;);"></div>
            <div class="collection-footer"><span class="name">Grey Brim</span><span class="price">N25</span></div><button class="cart-button"  >Add to cart</button></div></div>
        <center><h1 class="title">SNEAKERS</h1></center>
        <div class="items">
            <div class="collection-item">
                <div class="image" style="background-image: url(&quot;https://i.ibb.co/0s3pdnc/adidas-nmd.png&quot;);"></div>
                <div class="collection-footer"><span class="name">Adidas NMD</span><span class="price">N220</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/dJbG1cT/yeezy.png&quot;);"></div><div class="collection-footer"><span class="name">Adidas Yeezy</span><span class="price">N280</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/bPmVXyP/black-converse.png&quot;);"></div><div class="collection-footer"><span class="name">Black Converse</span><span class="price">N110</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/1RcFPk0/white-nike-high-tops.png&quot;);"></div><div class="collection-footer"><span class="name">Nike White AirForce</span><span class="price">N160</span></div><button class="cart-button"  >Add to cart</button></div></div>
             <center><h1 class="title">JACKETS</h1></center>
             <div class="items"><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/XzcwL5s/black-shearling.png&quot;);"></div><div class="collection-footer"><span class="name">Black Jean Shearling</span><span class="price">N125</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/mJS6vz0/blue-jean-jacket.png&quot;);"></div><div class="collection-footer"><span class="name">Blue Jean Jacket</span><span class="price">N90</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/N71k1ML/grey-jean-jacket.png&quot;);"></div><div class="collection-footer"><span class="name">Grey Jean Jacket</span><span class="price">N90</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/s96FpdP/brown-shearling.png&quot;);"></div><div class="collection-footer"><span class="name">Brown Shearling</span><span class="price">N165</span></div><button class="cart-button" >Add to cart</button></div></div>
             <center><h1 class="title">WOMEN</h1></center>
             <div class="items"><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/7CQVJNm/blue-tank.png&quot;);"></div><div class="collection-footer"><span class="name">Blue Tanktop</span><span class="price">N25</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/4W2DGKm/floral-blouse.png&quot;);"></div><div class="collection-footer"><span class="name">Floral Blouse</span><span class="price">N20</span></div><button class="cart-button" >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/KV18Ysr/floral-skirt.png&quot;);"></div><div class="collection-footer"><span class="name">Floral Dress</span><span class="price">N80</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png&quot;);"></div><div class="collection-footer"><span class="name">Red Dots Dress</span><span class="price">N80</span></div><button class="cart-button"  >Add to cart</button></div></div>
            <center><h1 class="title">MEN</h1></center>
            <div class="items">

                <div class="collection-item">
                    <div class="image" style="background-image: url(&quot;https://i.ibb.co/xJS0T3Y/camo-vest.png&quot;);"></div>
                    <div class="collection-footer"><span class="name">Camo Down Vest</span><span class="price">N325</span></div>
                    <button class="cart-button">Add to cart</button></div>
                    <div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/qMQ75QZ/floral-shirt.png&quot;);"></div><div class="collection-footer"><span class="name">Floral T-shirt</span><span class="price">N20</span></div><button class="cart-button"  >Add to cart</button></div><div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/55z32tw/long-sleeve.png&quot;);"></div><div class="collection-footer"><span class="name">Black &amp; White Longsleeve</span><span class="price">N25</span></div>
                    <button class="cart-button"  >Add to cart</button></div>
                    <div class="collection-item"><div class="image" style="background-image: url(&quot;https://i.ibb.co/RvwnBL8/pink-shirt.png&quot;);"></div>
                    <div class="collection-footer"><span class="name">Pink T-shirt</span><span class="price">N25</span></div>
                    <button class="cart-button"  >Add to cart</button>
                </div>
            </div>
    
        
        </div>
    </main>

</body>
<script type="text/javascript"src="index.js"></script>
</html>
This is my cart.html page 

<!DOCTYPE html>
<html>
<head>
    <title>Cart</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <a class="logo-container" href="index.html">
                <svg width="50px" height="39px" viewBox="0 0 50 39" class="logo"><title>Group</title><desc>Created with Sketch.</desc><g id="WiP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard" transform="translate(-90.000000, -38.000000)"><g id="Group" transform="translate(90.000000, 38.000000)"><polygon id="Rectangle" fill="#808282" points="3 14 25 26.5 47 14 40.855176 39 9.08421785 39"></polygon><polygon id="Triangle" fill-opacity="0.262838724" fill="#101A1A" points="25 8 40 39 10 39"></polygon><circle id="Oval" fill="#5E6363" cx="2" cy="9" r="2"></circle><circle id="Oval" fill="#5E6363" cx="25" cy="2" r="2"></circle><circle id="Oval" fill="#5E6363" cx="48" cy="9" r="2"></circle>
                </g></g></g>
                </svg>
            </a>
        </div>
        <div class="option">
        <div class="cart-icon" onclick="location.href='./cart.html'">
            <svg id="Capa_1" x="0px" y="0px" viewBox="0 0 407.453 407.453" xml:space="preserve" class="shopping-icon"><g><path d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486 c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z" style="fill: rgb(1, 0, 2);"></path><path d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243 v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391 c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386 C375.191,103.891,371.557,100.258,367.062,100.258z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0 c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394 c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274 C274.461,131.163,278.095,134.796,282.59,134.796z" style="fill: rgb(1, 0, 2);"></path><path d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907 c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z" style="fill: rgb(1, 0, 2);"></path><path d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129 c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65 c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z" style="fill: rgb(1, 0, 2);"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
            <span class="item-count"> 0 </span>
        </div>
    </div>
    </header>
    <main>
        <div class="cart-container">
        <div class="cart-heading">
            <p class="product">Product</p>
            <p class="description">Description</p>
            <p class="quantity">Quantity</p>
            <p class="price">Price</p>
            <p class="remove">Remove</p>
            </div>
            <div class="output"></div>
        </div>
            <div class="test-warning">*Please use the following test credit card for payments*<br>4242 4242 4242 4242 - Exp: 01/20 - CVV: 123</div>
            <center><button class="StripeCheckout"><span style="background-image: linear-gradient(rgb(125, 197, 238), rgb(0, 140, 221) 85%, rgb(48, 162, 228)); font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; position: relative; padding: 0px 12px; display: block; height: 30px; line-height: 30px; color: rgb(255, 255, 255); font-weight: bold; box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset; text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px; border-radius: 4px;">Pay Now</span></button></center>
    </main>

</body>
<script type="text/javascript"src="index.js">
    
</script>
</html>
Esther Maina
  • 1
  • 1
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. Please do NOT re-ask a closed question without giving more explanation why it is not to be closed as a duplicated of the older question – mplungjan Nov 23 '20 at 15:32
  • Start with this delegation: `productContainer.addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("minus")) subtract(tgt.)dataset.item); else if (tgt.classList.contains("add")) add(tgt.dataset.item) ;else if (tgt.classList.contains("remove")) tgt.closest(".cart-contain).remove(); })` – mplungjan Nov 23 '20 at 15:38
  • You have swapped subtract and add – mplungjan Nov 23 '20 at 15:38
  • Here is how your buttons should look - you cannot user the ID more than once so I use class instead`

    ${item.inCart}

    N ${item.price}.00

    `
     – mplungjan Nov 23 '20 at 15:40

0 Answers0