I am trying to update a table once a button is clicked. I have created the table and the button with the following HTML code

<button type="button" onclick="calculateMatrixFact()">Calculate MF!</button>

<table id = "matrix_factorization">
  <tr>
    <th>User</th>
    <th>Movie One</th>
    <th>Movie Two</th>
  </tr>
</table>

While the function that I am calling on the onclick event, is the following:

function calculateMatrixFact(){
    var cache = CacheValues();
  
  // split the array in two single arrays one per each user and movie
    var user_matrix = createGroups(cache.mu, 2);
    var score_matrix = createGroups(cache.ms, 2);

    // remove the string user_name and movie_name
    for (let i = 0; i < user_matrix.length && i < score_matrix.length; i++) {
    user_matrix[i].shift();
    score_matrix[i].shift();
    }

    var dot_matrix = [];

    // perform the dot product
    for (let j = 0; j < user_matrix.length; j++) {
    for (let k = 0; k < score_matrix.length; k++) {
        //console.log(user_matrix[j])
        //console.log(score_matrix[k])
        var dot_product = math.multiply(user_matrix[j], score_matrix[k]);
        dot_matrix.push(dot_product);
    }
    }

    // create the matrix and push back the string (first column of the table)
    var dot_prod_matrix = createGroups(dot_matrix, 2);
    dot_prod_matrix[0].unshift("Anna");
    dot_prod_matrix[1].unshift("Jonny");

    // from array to HTML table
    fetch = document.getElementById('matrix_factorization');
    for (var i = 0; i < dot_prod_matrix.length; i++) {
    var newRow = fetch.insertRow(fetch.length);
    for (var j = 0; j < dot_prod_matrix[i].length; j++) {
        var cell = newRow.insertCell(j);
        cell.innerHTML = dot_prod_matrix[i][j];
    }
    }
}

I think the problem is that I do not reset the table each time the button is clicked, is that right? How can I delete the old info and insert the new ones?

Here you can see the full code: https://jsfiddle.net/932ebu0v/7/