Handlebars does not fill table

I am using Handlebars (v 1.0.0) to fill a table in HTML. However somehow it does not fill the table like I am used to.

Here is my template:

{{#if users}}
<table>
    {{#each users}}
        <tr>
            <td>{{username}}</td>
            <td>{{email}}</td>
        </tr>
    {{/each}}
</table>

{{else}}
    <h3>No users found!</h3>
{{/if}}

So I does find users because I do not see the "No users found!" and when I call an empty object it does show the "No users found!".

When I do not use the table and print out these users like the next example. The usersnames and mail address' will show up in my HTML.

{{#if users}}

    {{#each users}}

        {{username}}<br/>
        {{email}}<br/>

    {{/each}}


{{else}}
    <h3>No users found!</h3>
{{/if}}

Here is how my template is build in the javascript:

var htmlSource = $(data).html();
var template = Handlebars.compile(htmlSource);
var compiled = template(usersArray);
that.$el.html(compiled);

Now when I console.log the compiled object, it doesn't show the table already.

Do you know why it doesn't work and can you help me out?

EDIT:

I just tested some more and found that the data will show up in the HTML when I leave out the <table> tags. However the <tr> and <td> won't show up in html. The data in it will be shown.

EDIT 2: I found out that it seems to be a jquery issue or javascript issue. When I console.log the htmlSource the HTML template is changed to this:

{{#if users}}

    {{#each users}}

    {{/each}}


{{else}}
<h3>No users found!</h3>
{{/if}}

<table><tr>
   <td>{{username}}</td> 
   <td>{{email}}</td>
</tr></table>

As you can see the table is moved outside the if statement. I tried other jquery versions (2.0.2, 2.0.3, 2.0.1, 1.10.2) but this didn't work. I tried using the innerXHTML script however this works the same as jQuery.

So my guess is that it might be a FireFox issue (though I tried 25 and 26), Chrome does the same... maybe something in EcmaScript??

I will let you know soon...

EDIT 3:

I created an html file with the html I need. With a script I get the specific section of html I need and place this in the data variable.

Now when console logging the data (console.log(data)) there is nothing wrong. When console logging the data with jQuery, the html is altered: console.log($(data));

It seems something is going wrong there.. but only when using table tags. Is this something jQuery can't handle? I don't know. I know how to overcome this issue by using the script tag... Though I would like to load that using require ;)

P.S. nemesv thanks for you're edits ;)