<p>Click "Add" button to see what happens:</p>
<button id="btn-add">Add</button>
<button id="btn-rm">Remove</button>
<div id="container">
  <!-- Template -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="my-template" type="x-tmpl-mustache">
  <div>
    <span class="name">{{name}}</span>
  </div>
  <div>
    <span class="comment">{{comment}}</span>
  </div>
</script>
* {box-sizing: border-box;}
body {
  margin: 15px;
  color: #222;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
button {
  border: none;
  background-color: #0392cf;
  color: #fff;
  padding: 15px;
}
span {
  color: #fff;
  padding: 5px 10px;
  margin: 2px;
  display: inline-block;
}
.name {background-color: #fe4a49;}
.comment {background-color: #222;}
let data = [
  {name: "John", comment: "That is great"},
  {name: "Alex", comment: "It's helpful"},
  {name: "David", comment: "Thanks a lot"}
];

let tmpl = $('#my-template').html();
Mustache.parse(tmpl);

$("#btn-add").click(() => {
  data.forEach((item) => {
    let rendered = Mustache.render(tmpl, item);
    console.log(rendered);
    $("#container").append(rendered);
  });  
});

$("#btn-rm").click(() => {
  $("#container").empty();
});

/* Ref
https://github.com/janl/mustache.js/
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.