cart count not updating in mobile devices woocommerce - woocommerce

Question

i am using this code to update cart count in woocommerce to update woocommerce cart.it is working correctly in larger devices.but not working in mobile devices.anly after refresh it works.
i am attaching code below.
in functions.php this is the code
add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );
function refresh_cart_count( $fragments ){
ob_start();
?>
<span class="counter" id="cart-count"><?php
$cart_count = WC()->cart->get_cart_contents_count();
echo $cart_count;
?></span>
<?php
$fragments['#cart-count'] = ob_get_clean();
return $fragments;
}
in header.php cart section in large devices and mobile devices
<li>
<a href="<?php echo get_template_directory_uri(); ?>/cart"
><i class="uil uil-shopping-cart-alt"></i> Cart</a
>
<span class="counter" id="cart-count-mobile"><?php
$cart_count = WC()->cart->get_cart_contents_count();
echo $cart_count;
?></span>
</li>
This is the same code repeating 2 times for cart in both large and mobile devices.

Answer 1

in functions.php use classname instead of id.it will work.
add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );
function refresh_cart_count( $fragments ){
ob_start();
?>
<span class="counter" id="cart-count"><?php
$cart_count = WC()->cart->get_cart_contents_count();
echo $cart_count;
?></span>
<?php
$fragments['span.counter'] = ob_get_clean();
return $fragments;
}