title: getElementByID for Dynamically generated ID Elements
body: <p>I am having an issue with getting the value of an <code>ID</code> element of the item that is dynamically generated from the data obtained from the database. I have a query <code>SELECT ItemID, ItemName, ItemImageName FROM Items</code>. Than I have the following code that will generate <code>ID</code> for each <code>&lt;div&gt;</code> for all rows returned from the database by concatenating the value of <code>ItemID</code> to each ID name.  </p>
  
  <pre><code>for ($i=0; $i &lt;$numrows; $i++) {
  $stmt-&gt;fetch()
  
  &lt;div&gt; &lt;img class="itemImage" id="Image" .$ItemID src=/images/itemImage . $itemID&gt; $ItemID &lt;/div&gt;
  &lt;div id= "ItemID" .$ItemID&gt; $ItemID &lt;/div&gt;
  &lt;div id= "ItemName" .$ItemID&gt; $ItemName" &lt;/div&gt;
  
  }
  </code></pre>
  
  <p>This should return  a similar result to this for an item with <code>ItemID=002</code>:</p>
  
  <pre><code>&lt;div&gt; &lt;img class="itemImage" id=Image002 src=/images/Image002 &gt; &lt;/div&gt;
  &lt;div id= ItemID002&gt; 002 &lt;/div&gt;
  &lt;div id= ItemName002&gt; SomeNameOfItem002" &lt;/div&gt;
  </code></pre>
  
  <p>Then I want to be able to click an image with an <code>ID=Image002</code> and I want to get a value of <code>ItemID</code> with the <code>getElementById("ItemID").innerHTML</code>. I have the following code:</p>
  
  <pre><code>var itemID = document.getElementById("ItemID").innerHTML;
  
  $( ".itemImage" ).click(function() {
  var itemID= document.getElementById("ItemID").innerHTML;
  console.log(itemID);
  </code></pre>
  
  <p>This however returns <code>itemID</code> as undefined. Any help would be greatly appreciated! </p>