title: jQuery load template inside a loop
body: <p>I have a json file with some data and I am using a Js loop to load a jQuery template to iterate through and load a table made of 4 rows based on the data, so far I only get the last row. <a href="https://github.com/codepb/jquery-template" rel="nofollow">https://github.com/codepb/jquery-template</a></p>
  
  <pre><code>&lt;script type="text/html" id="tableContent"&gt;
    &lt;tr&gt;
      &lt;th&gt;Key&lt;/th&gt;
      &lt;th&gt;Product&lt;/th&gt;
      &lt;th&gt;Bookings&lt;/th&gt;
      &lt;th&gt;%&lt;/th&gt;
      &lt;th&gt;Transactions&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td data-content=""&gt;sth&lt;/td&gt;
      &lt;td data-content="Product"&gt;&lt;/td&gt;
      &lt;td data-content="Bookings"&gt;&lt;/td&gt;
      &lt;td data-content="Percentage"&gt;&lt;/td&gt;
      &lt;td data-content="Transactions"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/script&gt;
  
        function builTable(){
            var table = "",
                colors = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'];
  
            for(i = 0; i&lt; source.Products.length; i++){
  
              $("table").loadTemplate($("#tableContent"),
  
  {
  
  
              Product: source.Products[i].Product,
              Bookings: source.Products[i].Bookings,
              Percentage: source.Products[i].Percentage,
              Transaction: source.Products[i].Transaction
  
  } ); 
  
    $(document).ready(function(){
  
      builTable();
  
    });
  
  &lt;table border="1" cellpadding="2"&gt;
  
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Is there something wrong inside the loop?</p>
  
  <p><a href="http://jsfiddle.net/9JV7t/1/" rel="nofollow">http://jsfiddle.net/9JV7t/1/</a></p>