Add google places autocomplete to newly generated inputs in list items
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var start = new google.maps.places.Autocomplete(
    (document.getElementById('start')), {
      types: ['geocode']
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="start" placeholder="Where to begin?" type="text" /&gt;

&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>I can get Google places autocomplete working in a text field. </p>

<p>I want a button to generate these fields as li's and include autocomplete for in each field. Here is an example without the autocomplete working:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('addplace').addEventListener('click', function() {
    addplace();
  });

var j=1;
function addplace() {
  var node = document.createElement("li"); 
  node.innerHTML = "&lt;input id='place" + j +"' placeholder='Pit stop " + j + "' onFocus='geolocate()' type='text' /&gt;";               
  document.getElementById("waypoints").appendChild(node);
  j++; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="submit" id="addplace" value="Add One!"&gt;
&lt;ul id="waypoints"&gt;&lt;/ul&gt;
&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>So the id's of inputs generated are place1, place2, etc.</p>

<p>I tried adding  </p>

<pre><code>var place"+j+" = new google.maps.places.Autocomplete(
(document.getElementById('place"+j+"')), {
  types: ['geocode']
});
</code></pre>

<p>into the definition of addplace function but it seemed to cause all my javascript to be disabled (the map no longer showed up at all). Not sure why; I don't imagine Google would be blocking it. Maybe I'm making a syntax error or place"+j+" is not a correct way to name a variable? </p>

<p>Thanks for your help automatically adding places autocomplete to each generated input field.</p>

<p>UPDATE: I noticed this question <a href="https://stackoverflow.com/questions/21553673/google-places-autocomplete-doesnt-work-on-dynamically-generated-input-elements">Google Places Autocomplete doesn&#39;t work on dynamically generated input elements</a>
and will study it to try and apply here but i notice use of ajax and other things that might be more complicated than i need in that example. i.e. they reference <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="nofollow noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</a> in an answer. if i could do this without jquery that would be nice or maybe more straightforward or educational for me, since i figure my partial solution is at least close / could be correct with some tweaks? </p>