The code

function calculateData(){
  let loanAmount = parseInt(document.getElementById('loanAmount').value);
  let payments = parseInt(document.getElementById('payments').value);
  let rate = parseInt(document.getElementById('rate').value);

  let remaining_balance = loanAmount;
  let interest_payment = 0;
  let total_interest = 0 ;
  let principal_payment = 0;
  let month = 0
  let total_monthly_payment = (((loanAmount)*(rate/1200))/(1- (Math.pow(1+ (rate/1200),-(payments))))).toFixed(2);
  let total_principal = 0;

  const template = document.getElementById("tableData-template");

  //get the location where template will be written or placed
  const eventBody = document.getElementById("tablebody");

  //clearing the template (anytime we are working with template and we are refrshing, we need to clear the  template)
  eventBody.innerHTML = "";


  while(month <=60){
    interest_payment = ((parseFloat(remaining_balance))*(parseFloat(rate/1200))).toFixed(2);
    principal_payment = (total_monthly_payment - interest_payment).toFixed(2);
    total_interest = (parseFloat(total_interest) + parseFloat(interest_payment)).toFixed(2);
    remaining_balance = (remaining_balance-principal_payment).toFixed(2);
    month = month + 1;
    total_principal =(parseFloat(total_principal)+ parseFloat(principal_payment)).toFixed(2);
    //new template row
    //getting the template (entire element inlcuding the children)
    const eventRow = document.importNode(template.content, true);

    //once we have template we can treat it like an html element
    //grabbing td's outside from template row and putting them into array
    //querySelectorALL gets all the occurence of td, while queryselector only returns the first occurence
    const eventCols = eventRow.querySelectorAll("td");

    //setting the values (look at htmml if confused)
    eventCols[0].textContent = month;
    eventCols[1].textContent = total_monthly_payment;
    eventCols[2].textContent = principal_payment;
    eventCols[3].textContent = interest_payment;
    eventCols[4].textContent = total_interest;
    eventCols[5].textContent = remaining_balance;

    eventBody.appendChild(eventRow);
  }

  let total_cost = (parseFloat(total_interest) + parseFloat(total_principal)).toFixed(2);

  document.getElementById("totalPrincipal").innerHTML = total_principal;
  document.getElementById("totalInterest").innerHTML = total_interest;
  document.getElementById("totalCost").innerHTML = total_cost;

}