How to add dynamic value to dynamic generated table using javascript

Question

I am making an EMI calculator where I want to calculate monthly installments and a table for each installment. You can see the result when you put the interest rate [example 9].

My question is how can I generate that table with some calculated value so each column will decrease the value from the principal. Like ai added an Image

here is an example: https://codepen.io/exclutips/pen/ZEvgXvb

function addTable(installment,amount,rate) {
          var table = document.querySelector("DynamicTable");
          var tableBody = document.getElementById('DynamicTable').getElementsByTagName('tbody')[0];
          tableBody.innerHTML = "";


       for (var i = 1; i < installment+1; i++) {
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);

            for (var j = 1; j < 8 + 1; j++) {
                var td = document.createElement('TD');
                
                if(i <=12){
                
                  td.appendChild(document.createTextNode(amount));
                  tr.appendChild(td);
                }
                
                if(i > 12){
                  td.appendChild(document.createTextNode(rate));
                  tr.appendChild(td);
                }
              
            }
        }
    }

    function Calculate() {
      
        // Extracting value in the amount
        var amount = document.querySelector("#loanAmount").value;
        var rateValue = document.querySelector("#interestRate").value;
        
        var year = document.querySelector("#loanPeriod").value;
        var gracePeriod = document.querySelector("#gracePeriod").value;
        var paymentperyear = document.querySelector("#paymentPerYear").value;
       
        var instalment = document.querySelector("#instalment").value;
        var graceInstalment = document.querySelector("#graceInstalment").value;
        var payableTotalInt = document.querySelector("#payableTotal").value;
        
        var principalMonthly = document.querySelector("#principalMonthly").value;
        var interestMonthly = document.querySelector("#interestMonthly").value;
        var interestEmployee = document.querySelector("#interestEmployee").value;
        var govtSubsidy = document.querySelector("#govtSubsidy").value;
        var employeeMonth = document.querySelector("#employeeMonth").value;

      
        const rate = rateValue / 100;
        
        //calculate months / 
        const months = year * paymentperyear;
        
        //Number of instalment 
        const instalment_g = months - gracePeriod;
        
        //Number of instalment with grace
        const installmentGrace = year * paymentperyear;
        
        // Calculating Payable Total interest
        const interest = ((amount * rate) * (instalment_g + 1) / (paymentperyear * 2) + (amount * rate * gracePeriod) / paymentperyear);
          
        //monthly payable Principal
        const month_pay_principal = amount / instalment_g;
              
        //monthly payable interest
        const month_pay_interest = interest / instalment_g;
        
        //Monthly Payable Interest by Employee
        const month_pay_interest_emp = month_pay_interest * 4 / 9;
        
        //Monthly Interest Subsidy by Govt. 
        const month_subsidy_interest_govt = month_pay_interest * 5 / 9;
        
        //instalment for employee 
        const instalment_for_employee = month_pay_principal + month_pay_interest_emp;
        //instalment for employee 
        const emi = month_pay_principal + month_pay_interest;
        
        
            document.querySelector("#instalment").value = instalment_g;
            document.querySelector("#graceInstalment").value = months;
            
            //-----------------------------------------------------------
            document.querySelector("#payableTotal").value = Math.round(interest);
            document.querySelector("#principalMonthly").value = Math.round(month_pay_principal);
            document.querySelector("#interestMonthly").value = Math.round(month_pay_interest);
            document.querySelector("#interestEmployee").value = Math.round(month_pay_interest_emp);
            document.querySelector("#govtSubsidy").value = Math.round(month_subsidy_interest_govt);
            document.querySelector("#employeeMonth").value = Math.round(instalment_for_employee);
            document.querySelector("#emi").value = Math.round(emi);
            

            addTable(months,amount,month_pay_interest);
        
    }  


    //Calculate dynamic table with interest 
    function addTable(install,amount,rate) {
          var table = document.querySelector("DynamicTable");
          var tableBody = document.getElementById('DynamicTable').getElementsByTagName('tbody')[0];
          tableBody.innerHTML = "";


       for (var i = 1; i < install + 1; i++) {
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);

            for (var j = 1; j < 8 + 1; j++) {
                var td = document.createElement('TD');
                
                if(i <=12){
                
                  td.appendChild(document.createTextNode(Math.round(amount)));
                  tr.appendChild(td);
                }
                
                if(i > 12){
                  td.appendChild(document.createTextNode(Math.round(rate)));
                  tr.appendChild(td);
                }
              
            }
        }
    }

.form-control:focus {
        color: #212529;
        background-color: #c5ffd6;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: none;
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
        <div class="row p-3 my-4 bg-light">
            <div class="col-md-6">
              <form action="" method="post">
                <div class="row align-items-center g-3">
                    <div class="col-auto">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>Loan Amount</td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="loanAmount" value="100000" required></td>
                                </tr>   
                                <tr>
                                    <td>Interest Rate(%)</td>
                                    <td><input onchange="Calculate()" type="text" class="form-control form-control-sm" id="interestRate" required></td>
                                </tr>   
                                <tr>
                                    <td>Loan Period( in Years )</td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="loanPeriod" value="2" required></td>
                                </tr>   
                                <tr>
                                    <td>Grace Period </td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="gracePeriod" value="12" required></td>
                                </tr>   
                                <tr>
                                    <td>Payment Per Year </td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="paymentPerYear" value="12" required></td>
                                </tr>   
                                <tr>
                                    <td>No. of Installment </td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="instalment" readonly></td>
                                </tr>   
                                <tr>
                                    <td>No. of Installments(With Grace Period)</td>
                                    <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="graceInstalment" readonly></td>
                                </tr>
                            </tbody>
                        </table>    
                    </div>  
                </div>
            </div>
            
            <div class="col-md-6">
                    <div class="row align-items-center g-3">
                        <div class="col-auto">
                            <table id="inputTable" class="table">
                                <tbody>
                                    <tr>
                                        <td>Payable Total Interest</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="payableTotal" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td>Monthly Payable Principal</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="principalMonthly" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td>Monthly Payable Interest</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="interestMonthly" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td>Monthly Payable Interest by Employee</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="interestEmployee" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td>Monthly  Interest Subsidy by Govt.</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="govtSubsidy" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td>Employee to pay Monthly payment</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm" id="employeeMonth" readonly></td>
                                    </tr>   
                                    <tr>
                                        <td class="text-danger">EMI</td>
                                        <td><input onchange="Calculate()" type="number" class="form-control form-control-sm text-danger" id="emi" readonly></td>
                                    </tr>
                                </tbody>
                            </table>    
                        </div>  
                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="row p-3 bg-light">
            <div class="col-md-12">
                <table id="DynamicTable" class="table">
                    <thead>
                        <tr>
                            <th>No of Months</th>
                            <th>Outstandng Principals</th>
                            <th>Monthly Payable Principal</th>
                            <th>Interest Accrued</th>
                            <th>Monthly Payable Interest</th>
                            <th>Inyerest Payable by employee</th>
                            <th>Interest subsidy by Govt.</th>
                            <th>EMI</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                                                
                    </tbody>
                </table>
            </div>
        </div>
    </div>