Iterate through multiple elements based on their id in jQuery
Instead of IDs (like #0), use classes instead. (Numeric-indexed IDs are quite a code smell anyway.) Or, if you can't remove the IDs entirely, just add classes to those elements. For example, adding the class of subtotal-container to each of those elements with IDs.
To make things clearer, I'd also recommend calling the function something like calculateTotal instead of total - it's more precise and also avoids possibly-confusing shadowing:
function calculateTotal() {
  const total = [...$('.subtotal-container .cart-subtotal')]
    .map(subtotalElm =&gt; 
  Number(subtotalElm.textContent.replace('€', '')))
    .reduce((a, b) =&gt; a + b, 0);
  $('.cart-total-price').text(total + '€');
}

Though, at this point, you may as well remove the dependency on jQuery entirely if you wished, it's not really accomplishing anything useful:
const total = [...document.querySelectorAll('.subtotal-container .cart-subtotal')]
  .map(subtotalElm =&gt; Number(subtotalElm.textContent.replace('€', '')))
  .reduce((a, b) =&gt; a + b, 0);
document.querySelector('.cart-total-price').textContent = total + '€';

With jQuery, keep in mind that
$('someSelector').find('someOtherSelector')

is equivalent to
$('someSelector someOtherSelector')

via the descendant selector.