title: how to append a handlebars template to a div with a certain id?
body: <p>i have a simple template that i populate with some data then im trying to append it before one did, but it seems to stop working.</p>
  
  <p>here is the <a href="http://jsfiddle.net/patrioticcow/nsvT3/8/" rel="nofollow">jsfiddle</a></p>
  
  <p>and the code:</p>
  
  <pre><code>&lt;ul class="wall_message"&gt;
      &lt;li id="168" class="msgid"&gt;
          &lt;div id="commentbox2"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;!-- in this case the json will be added only before `commentbox2`--&gt;
      &lt;li id="168" class="msgid"&gt;
          &lt;div id="commentbox3"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  
  &lt;script id="comment" type="text/x-handlebars-template"&gt;
                  {{#each this}}
                          &lt;div class="commentsp"&gt;{{comment}}&lt;/div&gt;
                  {{/each}}
  &lt;/script&gt;
  
  
  &lt;script&gt;
  
  //right now this json has only one main key (5), but it could have more
  var data = {"5":
              {"id":"2", "comment":"xxxxxxxx"}
             }
  
  /initiate the template
  var template = Handlebars.compile( $('#comment').html() );
  
  // place the json data in the template. the template will iterate through
  msg = template(data);
  
  jQuery.each(data, function(i, val) {
      console.log(val.id)
  
      //find the div with commentbox2 and add the msg before
      $('div#commentbox'+val.id).before(msg);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>im not sure what i am doing wrong in this case.</p>
  
  <p>any ideas?</p>
  
  <p>thanks</p>