update the content of clipboard in prismjs

Question

I have code snippet, which user can copy to his/her site. I use prismjs to show html code. also it has copy button, so user can copy the code in clipboard, it uses clipboardjs for this. user can choose between different options(this is the list like <select><option>..), which will update the code snippet and also should update the content of clipboard button(here's issue).

here's html

<pre class="language-html">
   <code id="code-example">
     <!-- <div class="widget widget-BTC" data-fiat="EUR"></div> -->
   </code>
</pre>

after user choose different options, the content of <code id="code-example"> will be updated (it updates the class name and data-fiat attribute)

here's js code which does update:

 let block = document.getElementById('code-example');
 block.innerHTML = '<!-- <div class="widget ...';
 Prism.highlightElement(block);

the issue is, when I choose other option from select list, it updates html code snippet, but if I click the copy button, it copies the old value, not updated one. I tried different things like here but still same issue.

Answer 1

It needs to create another object to update the value. here's solution:

new Clipboard('.yourButton', {
text: function(trigger) {
    return '<div>some text</div>';
}

});