Soy un desarrollador web principiante y todavía bastante nuevo en JavaScript. Estoy desarrollando un sitio web de comercio electrónico utilizando HTML, CSS y JS. para la página del carrito, tengo el siguiente código (que es estático).

 <link rel="stylesheet" href="css/cart.css"> <div id="cartMainContainer"> <h1> Checkout </h1> <div id="#cartContainer"> <div class="cart"> <div class="sm-product"> <img src=" https://i.ibb.co/23LzBDq/40.png" class="sm-product-img" alt="" /> <div class="sm-text"> <p class="sm-product-title"> Black Embroidered Dress </p> <p class="sm-product-desc"> Description about this very nice dress </p> </div> <div class=”prices”> <div class="sm-price">850 NIS</div> <div class="delete"><u>Remove</u></div> </div> </div> </div> </div> <div class="checkout-box"> <p class="text">Your Total is: </p> <h1 class="bill">850 NIS</h1> <a href="/checkout" class="checkout-btn">Place Order</a> </div> </div>

y cada producto tiene su propia identificación. El siguiente código es el botón "Agregar al carrito", que se encuentra en cada página "contentDetails.html". Solo incrementa la cantidad de elementos que se encuentran en la insignia del carrito en la barra de navegación. Necesito que el artículo se agregue al carrito (que sea dinámico) para cada cliente.

 let buttonDiv = document.createElement('div') buttonDiv.id = 'button' let buttonTag = document.createElement('button') buttonDiv.appendChild(buttonTag) buttonText = document.createTextNode('Add to Cart') buttonTag.onclick = function() { let order = id+" " let counter = 1 if(document.cookie.indexOf(',counter=')>=0) { order = id + " " + document.cookie.split(',')[0].split('=')[1] counter = Number(document.cookie.split(',')[1].split('=')[1]) + 1 } document.cookie = "orderId=" + order + ",counter=" + counter document.getElementById("badge").innerHTML = counter console.log(document.cookie) } buttonTag.appendChild(buttonText)