Cart problem

[TrendBlend]

Hello, is there an easy way to update the cart drawer without refreshing. Because changing all the innerHTML of all objects is a lot of work and they do not display exactly the same for when for example more of the same products are added to cart. When I refresh the cart looks good again though, so is there no easier way to update the cart drawer. I currently have this code: https://codeshare.io/7JBEXL and it looks like this for URL: https://interiorglows.com/products/cotton-buffalo-plaid-rug-soft-durable-home-decor?variant=49834624.... After refreshing it looks way better so easily that's why im asking.

After refreshing:

Please I need help with this!

[TrendBlend]

Hello @AmeliaIsabella can you please show how, I tried that yesterday and it did not work

[TrendBlend]

tried this but didnt work:

$.ajax({
type: 'POST',
url: '/cart/add.js',
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/json',
success: function(response) {
console.log('Product added to cart:', response);
fetch(`${routes.cart_url}?section_id=cart-drawer`)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html');
const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
for (const selector of selectors) {
const targetElement = document.querySelector(selector);
const sourceElement = html.querySelector(selector);
if (targetElement && sourceElement) {
targetElement.replaceWith(sourceElement);
}
}
})
.catch((e) => {
console.error(e);
});


},
error: function(XMLHttpRequest, textStatus) {
console.error('Error adding product to cart:', textStatus);
}
});