<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
  var t = document.querySelector('#productrow')
      
function appendRow(data) {


  const cells = t.content.querySelectorAll("td");
  cells[0].textContent = data[0];
  cells[1].textContent = data[1];

  var clone = document.importNode(t.content, true);
  document.querySelector("tbody").appendChild(clone);
}


appendRow(['foo', 'bar'])

setInterval(() => appendRow(['Now is', (new Date()).toLocaleString()]), 1000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.