'Using the same widget multiple times on the same html page

I'm new to using html and widgets and having trouble using the same widget from https://coinmarketcap.com/widget/price-blocks/ multiple times on the same page:

HTML - desired widget

<div class="container">
  <h1>Coin Set 1</h1>
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinPriceBlock.js"></script>
<div id="coinmarketcap-widget-coin-price-block" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
</div>

<div class="container">
  <h1>Coin Set 2</h1>
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinPriceBlock.js"></script>
<div id="coinmarketcap-widget-coin-price-block" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
</div>

I can get the widget to work on different html pages.

Could someone explain why this wouldn't be working on the same page? And is it possible to use it multiple times?

javascripthtmlwidget


Solution 1:[1]

The javascript is not made for handling two widgets. Importing it multiple times won't change that.

A solution could be using iframes to separate the widgets.

<iframe frameborder="0" width="800" height="400" src="widget.html"></iframe>
<iframe frameborder="0" width="800" height="400" src="widget.html"></iframe>

Place the widget code in widget.html.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes Wulf

Related Questions