title: button function makes buttons but event is only fired when the LAST button made is clicked, no error message
body: <p>I made a function that creates buttons inside a box. I want it to create the button with the text, id, and event given, then put that button inside a box. It works with making the buttons...the problem is that only the very last button made has its event fired when clicked. All other buttons before that are ignored. There are no error messages to this issue. I even tried having it <code>console.log()</code> the inputted id and event. It showed in the console that they had the event and id given to them but it didn't work anyways.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
  
    function button(text, id, event) {
      let starterErrMsg = "button(text,id,event) -&gt; ";
      if (text != undefined) {
        if (id != undefined) {
          if (event != undefined) {
            let box = document.getElementById("button-section").innerHTML;
            document.getElementById("button-section").innerHTML = `${box} &lt;center&gt;&lt;button id='${id}' class='action'&gt;${text}&lt;/button&gt;&lt;/center&gt;`;
            document.getElementById(id).addEventListener("click", event);
            console.log(id);
            console.log(event);
          } else {
            throw starterErrMsg + "event is undefined";
          }
        } else {
          throw starterErrMsg + "id is undefined";
        }
      } else {
        throw starterErrMsg + "text is undefined"
      }
    }
  
    button("hello! (a)", "a", function() {
      alert("hi! (a)");
    });
    button("hello! (b)", "b", function() {
      alert("hi! (b)");
    });
    button("hello! (c)", "c", function() {
      alert("hi! (c)");
    });
    button("hello! (d)", "d", function() {
      alert("hi! (d)");
    });
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#button-section {
    height: 200px;
    position: relative;
    bottom: 135px;
    background-color: #234;
  }
  
  .action {
    width: 99%;
    height: 60px;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
    background-color: indigo;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id='button-section' style='overflow-y:scroll'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(view the snippet full page)</p>