Handlebars for each template not working in Node

Question

I'm using Node.js, Express, and Handlebars to render template on client side. I'm not getting any errors, but the template is not getting populated.

view: detail.hbs

<table id="attachmentTable" class="table table-condensed box-bottom-space"> 
  <tbody>
    ...                         
  </tbody>
</table>

// The back slash before the curly brackets are required, without it errors out.
<script id="rowTemplate" type="text/x-handlebars-template">
  \{{#each this}}
  <tr>
    <td class="attachments">
      <i class="fa fa-file-text"></i> &nbsp;
      <a target="_blank" href="/uploads/\{{this}}">\{{this}}</a>
      <a class="deleteAttachmentIcon text-danger" href="javascript:;" data-deletefile="\{{this}}"><span class="fa fa-remove"></span></a>
    </td>
  </tr>
  \{{/each}}
</script>

<script type="text/javascript" src="/js/handlebars-v4.0.5.min.js"></script>
<script>
  $(function($) {
    $.ajax({
      url: '/processes/upload/{{processes._id}}',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
        if(response.success){
          console.log(response.file);
          var rTemplate = $("#rowTemplate").html();
          var crTemplate = Handlebars.compile(rTemplate);
          $("#attachmentTable body").append(crTemplate(response.file));   
        }           
      }
    });
  });
</script>

This is the response from server:

{"success":true,"msg":"The file(s) has been Upladed Successfully!","file":["June Updates1-1519927100102.docx","export-11-03-2017-1519927100103.xls"]}

What am I missing?

Answer 1

Without looking too hard at the other code:

$("#attachmentTable body").append(crTemplate(response.file));

You probably meant to select tbody here, not body.