Estoy tratando de hacer una ventana emergente de actualización de entrada en vivo en mi sitio de comercio electrónico. Es algo así. Daré entrada en la opción Agregar carrito y la ventana emergente podrá actualizar y mostrar el valor actual. Todo funciona bien, excepto la actualización en vivo en popover. ventana emergente que muestra el valor anterior. Estoy usando bootstrap5.

 function updateCart(cart) { for (var item in cart) { document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "'class='btn btn-primary minus'>-</button> <span id='val" + item + "''>" + cart[item] + "</span> <button id='plus" + item + "' class='btn btn-primary plus'> + </button>"; } localStorage.setItem('cart', JSON.stringify(cart)); document.getElementById('cart').innerHTML = Object.keys(cart).length; console.log(cart); updatePopover(cart); } // if plus or minus button is clicked, change the cart as well as the diplay value // For plus $('.divpr').on("click", "button.plus", function () { b = this.id.slice(6,) cart['pr' + b] = cart['pr' + b] + 1 document.getElementById('valpr' + b).innerHTML = cart['pr' + b] updateCart(cart) }); // For minus $('.divpr').on("click", "button.minus", function () { a = this.id.slice(7,) cart['pr' + a] = cart['pr' + a] - 1 cart['pr' + a] = Math.max(0, cart['pr' + a]); document.getElementById('valpr' + a).innerHTML = cart['pr' + a] updateCart(cart) }); function updatePopover(cart) { console.log('we are inside udatePopover'); var popStr = ""; popStr = popStr + "<h5> Your selected Items </h5><div class=' mx-2 my-2'>"; var i = 1; for (var item in cart) { popStr = popStr + "<b>" + i + "</b>. "; popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0,15)+"..." + " Qty: " + cart[item] + '<br>' i = i + 1; }; popStr = popStr + "</div>" console.log(popStr); document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', popStr); var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl, { html: true }) }); } updatePopover(cart);