Using the same widget multiple times on the same html page-CodePudding

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 >
  <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 >
  <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?

CodePudding user response：

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.