Using twitter widgets with html anchor tag rendered by javascript

I am using the code from the twitter for websites guide. I have put the JavaScript code snippet from step 4 into a function I have called tWidgit.

This code converts the text hyperlink into a Tweet button. It is working when I hard-code Twitters HTML but it is not working for the link that is generated by my JavaScript. I did set the class on line 36:

tw.class = “twitter-share-button”;

The JavaScript sets up a listener for the details elements and creates a hyperlink based on the data attribute from each summary item on click. I am trying to make a tweet button that allows the user to tweet the URL. I need to use their JavaScript. Here is my codepen.

Please also see my code attached:

function tWigit() {
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));  
}


const root = "https://www.onetonline.org/link/summary/";
const twt = "https://twitter.com/intent/tweet?url=https://www.onetonline.org/link/summary/";

const fs = document.createElement('a');
fs.id="FS";
const linkText = document.createTextNode("functional skills");
fs.appendChild(linkText);
fs.classList.add("hide");
fs.title = "functional skills";
fs.href = "https://www.onetonline.org/link/summary/";
//document.body.appendChild(fs);
document.getElementById("p1").appendChild(fs);

const tw = document.createElement('a');
tw.id="TW";
tw.class = "twitter-share-button";
const tweetText = document.createTextNode("Tweet");
tw.appendChild(tweetText);
tw.classList.add("hide");
tw.title = "Tweet";
tw.href = "https://twitter.com/intent/tweet?url=";
tw.target = "_blank";
document.getElementById("p2").appendChild(tw);
tWigit();

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  const isSummary = tgt.tagName==="SUMMARY";
  const code = tgt.dataset.code;
  fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    fs.href=root+code;
  }  
  tw.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
  if (isSummary && code) {
    tw.href=twt+code;
  }  

  
});

.hide { display:none; }

<div id="container">
  <details id="agriculture" class="details">
    <summary>Agriculture</summary>
    <details>
      <summary data-code="53-7064.00">Picking & packing</summary>
    </details>
    <details>
      <summary data-code="45-2092.02">Farm worker</summary>
    </details>

    <details>
      <summary data-code="45-2091.00">Agricultural Equipment Operator</summary>
    </details>
    <details>
      <summary data-code="45-2093.00">Farmworkers, Farm, Ranch, and Aquacultural Animals</summary>
    </details>

  </details>

  <details id="construction" class="details">
    <summary>Construction</summary>
    <details>
      <summary data-code="47-2061.00">Construction Labourer</summary>
    </details>
    <details>
      <summary data-code="47-2073.00">Operating Engineers and Other Construction Equipment Operators</summary>
    </details>
    <details data-code="47-2051.00">
      <summary>Cement Masons and Concrete Finishers</summary>
    </details>
    <details>
      <summary data-code="47-2021.00">Brickmasons and Blockmasons</summary>
    </details>
    <details>
      <summary data-code="47-4031.00">Fence Erector</summary>
    </details>
    <details>
      <summary data-code="17-3031.01">Surveying Technician</summary>
    </details>
  </details>
</div>

<p id="p1"></p>
<p id="p2"></p>

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

Please note final code using twttr.widgets.createShareButton is here

Answer

After creating the anchor tag, you need to reload the twitter widget with twttr.widgets.load();. Check the below code:

(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"));

document.getElementById('twitter-wjs').addEventListener('load', function() {
  const root = "https://www.onetonline.org/link/summary/";
  const twt = "https://twitter.com/intent/tweet?url=";

  const fs = document.createElement('a');
  fs.id="FS";
  const linkText = document.createTextNode("functional skills");
  fs.appendChild(linkText);
  fs.classList.add("hide");
  fs.title = "functional skills";
  fs.href = "https://www.onetonline.org/link/summary/";
  //document.body.appendChild(fs);
  document.getElementById("p1").appendChild(fs);

  const tw = document.createElement('a');
  tw.href = "https://twitter.com/intent/tweet?url=";
  tw.className = "twitter-share-button";
  tw.innerHTML = "Tweet"
  document.getElementById("p2").appendChild(tw);
  tw.classList.add("hide");
  twttr.widgets.load();

  document.getElementById("container").addEventListener("click",function(e) {
    const tgt = e.target;
    const isSummary = tgt.tagName==="SUMMARY";
    const code = tgt.dataset.code;
    fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary && code) {
      fs.href=root+code;
    }  
    tw.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary && code) {
      tw.href=twt+code;
      twttr.widgets.load();
    }  


  });

})