title: How to overwrite data in a table?
body: <p>Trying to create a table with data-attributes when clicking on a link</p>
  
  <p>The problem is most likely in this code</p>
  
  <p>I can not understand how to rewrite the data in the table.
  Now the data is sequentially added to the table.</p>
  
  <p>My code - <a href="https://jsfiddle.net/347x8bwq/" rel="nofollow noreferrer">https://jsfiddle.net/347x8bwq/</a></p>
  
  <pre><code>(function() {
  
    'use strict';
  
    function createTable() {
      let link = document.querySelectorAll('.link');
      let block = document.querySelector('.block');
      let blockTable = document.querySelector('.table');
  
      for (let i = 0; i &lt; link.length; i++) {
  
        let links = link[i];
  
        links.addEventListener('click', function(e) {
          e.preventDefault();
  
          let linkData = this.dataset;
  
          for (let j in linkData) {
            let tableRow = document.createElement('tr');
  
            let arr = linkData[j].split('|');
            for (let k = 0; k &lt; arr.length; k++) {
              let tableCol = document.createElement('td');
              tableCol.innerHTML = arr[k];
              tableRow.appendChild(tableCol);
  
            }
  
                      blockTable.appendChild(tableRow);
  
          }       
  
  
        });
      }
    }
    createTable();
  
  </code></pre>
  
  <p>Desired behavior - when clicking on a link each time - a new table was created</p>