* {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 container = document.querySelector("#container");
let btnAdd = document.querySelector("#btn-add");
let btnRm = document.querySelector("#btn-rm");

let data = [
  {name: "John", comment: "That is great"},
  {name: "Alex", comment: "It's helpful"},
  {name: "David", comment: "Thanks a lot"}
];

let itemTemplate = (data) => {
  return `
    <div>
      <span class="name">${data.name}</span>
    </div>
    <div>
      <span class="comment">${data.comment}</span>
    </div>
  `;
}

btnAdd.addEventListener("click", () => {
  data.forEach(item => {
    let tmpl = itemTemplate(item);
    let frag = document.createRange().createContextualFragment(tmpl);
    container.appendChild(frag);
  });
}); 

btnRm.addEventListener("click", () => {
  while(container.firstChild) {
    delete container.removeChild(container.firstChild);
  }
});