JSFiddle - React, Tailwind, and code Playground

HTML

<span id="sound"></span>

JavaScript

var CHORDS = [ { id: "A", A: [ {name: "A", image: "http://www.sti.or.th/en/images/soundicon1small.png", sound:"http://soundbible.com/mp3/Pew_Pew-DKnight556-1379997159.mp3"}, {name: "A flat", image: "http://www.sti.or.th/en/images/soundicon1small.png", sound:"http://soundbible.com/mp3/Pew_Pew-DKnight556-1379997159.mp3"}, {name: "A sharp", image: "http://www.sti.or.th/en/images/soundicon1small.png", sound:"http://soundbible.com/mp3/Pew_Pew-DKnight556-1379997159.mp3"} ] } ];

var table = document.createElement("table");

for(var i = 0; i < CHORDS[0].A.length; i++) {
  var row = table.insertRow(0);
  var cell = row.insertCell(0);
  var image = document.createElement("img");
  image.src = CHORDS[0].A[i].image;
  var button = document.createElement("button");
  button.type = "button";
  button.innerHTML = "Listen to "+CHORDS[0].A[i].name+" Chord";
  button.onclick = (function(i) {return function() { playSound(CHORDS[0].A[i].sound) } })(i);
    
  cell.appendChild(image);
  cell.appendChild(button);
}

document.body.appendChild(table);

function playSound(soundfile) {
  var emb = document.createElement("embed");
  emb.src = soundfile;
  emb.setAttribute('hidden', 'true');
  emb.setAttribute('autostart', 'true');
  emb.setAttribute('loop', 'false');
  document.getElementById("sound").appendChild(emb);
}