How to insert pivot tables referring to plots

I am working with a product sales registry, when I insert the product I can manipulate a discontent (%), input value and then I have the final value, I can select in HTML input number a parcel number up to 6x, good when performing the calulo all normal happens, however I am trying to search a solution that after I fill the number of parcels appears below the table with the parcel number, the value of each parcel and its date of maturity.

Follow the code snippet of the inputs:

<form id="form1" name"form1" method"post" action"" enctype="multipart/form-data">
    <div class="produtos">
      <p class="campoProduto">
      <label>Cód Produto: <input type="text" name="codProduto" id="codProduto" size="5"/></label>
      <label>Produto: <input name="nomeProduto" type="text" size="10" value="" /></label> 
      <label>Qt.:  <input type="number" min="1" max="999" size="1" name="qtProduto" id="qtProduto" onblur="calcValor()" /></label>
      <label>Valor R$: <input type="text" name="valorProduto" id="valorProduto" size="6" onkeypress="mascara(this,float)"/></label>
      <a href="#" class="removerProduto">Remover Produto</a> 
           </p>
         </div>
         <p>
          <a href="#" class="adicionarProduto">Adicionar Produto</a>
        </p>
        <br>
      <label>Data da Compra <input name="datacompra" type="text" id="datacompra" size="6" maxlength="10" value="<?php echo date('d/m/Y')?>" onKeyUp="javascript:somente_numero(this);" onkeypress="formatar_mascara(this,'##/##/####')"/></label>

Discount (%):
   Entry R $:    Pacelas:
   Amount:                                            

Function to perform my calculations

    // zerando total
  document.getElementById("total").value = '0';
  // Preço do produto
  var PRECO = parseFloat(document.getElementById("valorProduto").value);
    // Porcentagem do desconto
  var PORCENTAGEM = parseFloat(document.getElementById("desconto").value);

  var ENTRADA = parseFloat(document.getElementById("entrada").value);

  var QT = document.getElementById("qtProduto").value;

  var VDESCONTO = parseFloat(PRECO*(PORCENTAGEM/100));

  var TOTAL = parseFloat(PRECO)*QT - (parseFloat(ENTRADA + VDESCONTO));


  document.getElementById("vdesconto").value = VDESCONTO.toFixed(2); 
  document.getElementById("sp_vdesconto").innerText = VDESCONTO.toFixed(2);
  document.getElementById("total").value = TOTAL.toFixed(2);
  document.getElementById("sp_total").innerText = TOTAL.toFixed(2);
  document.getElementById("debito").innerText = DEBITO.toFixed(2);
} 

function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function float(v){
    v=v.replace(",",",")
  return v;
}

However it is missing a onblur when selecting the parcel and the table as mentioned above appears

How can I evolve with this idea?

I can not create a table without refresh on the screen displaying the parcel number, value of each parcel and expiration date.

Solution:

   function calculamensalidades(){

  var valortotal = parseFloat(document.getElementById("total").value);
  var valorparcela = valortotal/document.getElementById("select_parcelas").value;
  var parcelas = parseFloat(document.getElementById("select_parcelas").value);
  var date = new Date();
  var mesvencimento = date.getMonth();
  var diavencimento = date.getDate();

  var tabela;
  tabela = "<br><table border='0' width='30%' style='text-align:center'><tr><td bgcolor='#4682B4'>Parcela</td><td bgcolor='#4682B4' >Valor</td><td bgcolor='#4682B4'>Vencimento</td></tr>";


  for(var a=0; a<document.getElementById("select_parcelas").value; a++)
 {
  var n_date = new Date(date.getFullYear(), eval(a+mesvencimento), diavencimento);
  var diavec = date.getDate();
  var mesvenc = n_date.getMonth();
  var anovenc = n_date.getFullYear();

     tabela = tabela + "<tr><td bgcolor='#9AC0CD'>"+(a+1)+"</td><td bgcolor='#9AC0CD'>R$ "+valorparcela.toFixed(2)+"</td><td bgcolor='#9AC0CD'>"+diavec+"/"+mesvenc+"/"+anovenc+"</td></tr>";
 }
 tabela=tabela+"</table>";
document.getElementById("mensalidades").innerHTML="";
document.getElementById("mensalidades").innerHTML=tabela;
 }

function apagatabela(){
document.getElementById('mensalidades').innerHTML="";
}