title: eventhandler not attaching to div elements created in a forloop
body: <p>I am trying to create a simple user interface consisting of an input text box that only accepts values from a 3X10 number pad grid 0-9 with the top row showing the number selected on the number pad. something like this to be exact<a href="https://i.stack.imgur.com/C7YYJ.png" rel="nofollow noreferrer">UI-interface</a></p>
  <p>So far I have been able to create &quot;divs&quot; that I'll be using for buttons but they stack up on top of each other which I can play around with the styling using bootstrap and get the alignment working. I have been unable to attach the event listeners needed and can't figure out what I'm doing wrong. below is my code. I am using jquery and bootstrap.</p>
  <pre class="lang-js prettyprint-override"><code>function buildHtmlAndInteractions(init, lrnUtils) {
      //number pad structure
      // var $htmlObj = $('&lt;table id=&quot;responsetable&quot;&gt;&lt;thead&gt;&lt;input id=&quot;question_input&quot; type=&quot;text&quot; placeholder=&quot;e.g. 15:45&quot; /&gt;&lt;tr&gt;...&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;');
      // var $htmlObj = $('&lt;div class=&quot;container&quot;&gt;&lt;input id=&quot;question_input&quot; type=&quot;text&quot; placeholder=&quot;e.g. 15:45&quot; /&gt;&lt;div&gt;...&lt;/div&gt;&lt;/div&gt;')
      var $htmlObj = $('&lt;div class=&quot;container-fluid&quot;&gt;');
      var html = '&lt;input id=&quot;question_input&quot; type=&quot;text&quot; value=&quot;&quot;&gt;';
      var padLayout = [
          [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;],
          [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;],
          [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;]
      ];
      for (let i = 0, len = padLayout.length; i &lt; len; ++i) {
          html += `&lt;div class=&quot;row&quot;&gt;`;
          for (let j = 0, rowLen = padLayout[i].length; j &lt; rowLen; ++j) {
              html += `&lt;div class=&quot;col&quot; textContent=&quot;${padLayout[i][j]}&quot;&gt;` + padLayout[i][j] + `&lt;/div&gt;`;
              var keys = document.getElementsByClassName(&quot;col&quot;);
              for (var k = 0; k &lt; keys.length; k++) {
                  keys[k].addEventListener('click', logtoCon, false);
              }
  
              function logtoCon() {
                  console.log(this.className);
              }
              console.log(keys);
          }
          html += '&lt;/div&gt;';
      }
      html += '&lt;/div&gt;';
      $(html).appendTo($htmlObj);
      return $htmlObj;
  };
  </code></pre>