id="cart-icon-bubble"を複数設置したい

[mokudai]

スマホやPC、またメニューのなかなどにカートアイコンを設置し、

商品が入ったらカートの中の数が更新されるようにしたく、

下記のコードを同じheader.liquid内に2箇所に設置しております。

同じID（id="cart-icon-bubble"）なので複数設置はどうかと思っていましたが

やはり挙動が一部おかしくなってしまいます。

良い改善案はないでしょうか？

●現時点（下記コードで2箇所に設置）

先にコードを設置しているPC版は問題なく反応しますが、

下にコードがあるスマホ版は商品ページでカートインやカートで数量を変更してもリアルタイムで変更できず

ページ更新したら更新される状態。

id="cart-icon-bubble"などが記載されているJS（cart.jsなど）

うまく別のIDをしたりできないか試行錯誤しましたがうまく行かず

最悪、お買い物カート内で数量を変えたらエラーが出る状態になってしまいました。

ーーーーーーーーーーー

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset ">
<div class="icon-menu-wrap">
<div id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</div>
<div class="icon-menu-wrap-text">カート</div>
</div>
</a>

[Jizo_Inagaki]

試作確認は行なっていませんが一例としては以下のように対応することになると思います。

• idではなくclassで動く形に書き換えて対応する
• MutationObserverなど用いて元からある要素を監視し、変化を検出した際に連動して他の要素を変化させて対応する

参考:

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

[mokudai]

MutationObserverははじめて知りました。

ありがとうございます！