I'm using jQuery and Mustache Js in a project.

I have the template in a script tag. The template requires some dynamic/variable html based on some data. Hence I load the template using jQuery, manipulate it, and then write it back into the script tag.

However, loading the template into a div(for manipulation), using jquery seems to alter the structure of the template (it moves things around), which invalidates the template. 

How do i update the template dynamically and avoid this issue? (Any help / Pointers / etc)

Original Template

1.     <table>
2.         <thead>
3.             <tr>
4.                 <td>FN</td>
5.                 <td>SN</td>
6.                 <td>OT</td>
7.             </tr>
8.         </thead>
9.         <tbody>{{#Users}}
10.             <tr class="tr-border" data-row-id="{{DCSID}}">
11.                 <td class="td-border">{{FN}}</td>
12.                 <td class="td-border">{{SN}}</td>
13.                 <td class="td-border">{{OT}}</td>
14.             </tr>{{/Users}}</tbody>
15.     </table>

 

Loading with jquery into another div causes this below( moves {{#Users}} {{/Users}} out of place)

1.        {{#Users}} {{/Users}}
2.        <table>
3.             <thead>
4.                 <tr>
5.                     <td>FN</td>
6.                     <td>SN</td>
7.                     <td>OT</td>
8.                 </tr>
9.             </thead>
10.             <tbody><tr class="tr-border" data-row-id="{{DCSID}}">
11.                     <td class="td-border">{{FN}}</td>
12.                     <td class="td-border">{{SN}}</td>
13.                     <td class="td-border">{{OT}}</td>
14.                 </tr></tbody>
15.         </table

The code below is how I'm going about it. Also this is a js fiddle link here

1.     var $newDcsTemplate = $('<div/>').html($('#dcs-template').html()); // for manipulation
2.     var original1 = $('#dcs-template').html()
3.     var original2 = document.getElementById('dcs-template').innerHTML;
4.     
5.     // manipulate the template here and replace content of script tag with it.
6.     
7.     
8.     console.log(original1); // works fine
9.     console.log(original2) // works fine
10.     console.log($newDcsTemplate.html()) // messed up the template