title: How do I bake unique accessible/passable values into multiple displayed buttons?
body: <p><strong>Backstory:</strong></p>
  
  <p>• Varying dynamic items (buttons) will be generated and displayed in a <strong>single div</strong>.</p>
  
  <p>• Each button is created from a unique object with a unique ID value.</p>
  
  <p><strong>Problem:</strong> </p>
  
  <p>How do I get each generated and displayed button to retain, and then pass along when clicked, its unique "id"?</p>
  
  <p>All of my efforts so far have gotten me results of "undefined" or displaying only the last generated id value, regardless of what button is clicked. Also things that target DOM elements don't seem to help as each of my unique items will not be inside it's own element. Rather just listed out in a single element.</p>
  
  <p>As far as ideas/answers I am after straightforward/readability vs. speed/efficiency. <strong>I am also trying to keep as much of my functionality on the javascript side and rely on HTML for as little as possible beyond "displaying" things.</strong></p>
  
  <p>The following code is working as expected for me sans my question:</p>
  
  <pre><code>var allItems = [
   {id:1, name:"Space Gem", power:100},
   {id:14, name:"Time Gem", power:200},
   {id:22, name:"Reality Gem", power:300}
  ];
  
  var map = {
   tile: [
    {id:22},
    {id:1}
   ]
  }
  
  onTile();
  
  function onTile() {
  
      for ( var i = 0; i &lt; map.tile.length; i++ ) {
          var itemId = map.tile[i].id;    
  
          for (var j = 0; j &lt; allItems.length; j++) {
              if (itemId === allItems[j].id) {
                  var itemName = allItems[j].name;
  
            var button = document.createElement("button");
                  button.innerHTML = itemId + " " + itemName;
                  document.getElementById("tile_display").appendChild(button);
                  button.addEventListener ("click", get, false);
              }
          }   
      }
  
  }
  
  function get(itemId) {
      alert ("You clicked button with ID: " + itemId);
  }
  </code></pre>