title: Printing dynamic html templates onto page with JavaScript/jquery
body: <p>I have this html template:</p>
  
  <pre><code>&lt;template id="photo-template"&gt;
      &lt;div class="template-border"&gt;
          &lt;p class="name"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I want to display multiple of these on the same page but change the name depending on some strings in a javascript array. This is the code I have to display the templates:</p>
  
  <pre><code>for (var i = 0; i &lt; 3; i++) {
      var tmpl = document.getElementById('photo-template').content.cloneNode(true);
      $("#content").append(tmpl);
      $(".name").text(javascript_array[i]);
  }
  </code></pre>
  
  <p>The result should be 3 templates on the page each with a different name, but, for some reason, it prints the 3 templates only with the last name in the array. For example if I had an array {"Alex","John","Thomas"} all 3 templates would have Thomas as the name. If I did</p>
  
  <pre><code>for (var i = 0; i &lt; 2; i++) {...}
  </code></pre>
  
  <p>all 3 templates would have the name John. So, how do I make then appear with the different names?</p>