Dynamically create HTML forms not working
<p>I am trying to create several forms for the options page of a Chrome extension, but when I click 'add', the forms do not appear. </p>

<p><code>options.html</code></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;title&gt;My Test Extension Options&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;My Tabs&lt;/h1&gt;
  &lt;/header&gt;
  &lt;form id='fields'&gt;
    &lt;button id="createNew"&gt;Add...&lt;/button&gt;
  &lt;/form&gt;

  &lt;div id="status"&gt;&lt;/div&gt;
  &lt;button id="save"&gt;Save&lt;/button&gt;

&lt;/body&gt;
  &lt;script src="./js/options.js"&gt;&lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p><code>options.js</code></p>

<pre><code>function render_form() {
  let counter = 0;
  let newdiv = document.createElement('div');
  newdiv.innerHTML = "Entry " + (counter + 1) + " &lt;br&gt;&lt;input type='text' name='myInputs[]'&gt;";
  document.getElementById('fields').appendChild(newdiv);
  counter++;
}

document.getElementById('createNew').addEventListener('click', render_form());
</code></pre>

<p>When I take out the invocation from the very last line (ie saying <code>render_form</code> instead of <code>render_form()</code>), the input field will not be there at all, but when I do invoke, the initial field will be there, but nothing will happen upon clicking the <code>Add...</code> button.</p>