How can I use a function for many rows that are in a container in JavaScript?

Question

I am working on a table that has input elements within it. There are many rows in a section due to "ADD SECTION" button (the button adds more rows).
For each row, I need my user to input values, some are numbers (target set, actual achieved and weighting) and the form processes the percentage target, gives a rating and weighted rating as in the attached image:

I have only processed for the first row but I have failed for the other rows which the user adds:

Below is the code I used for processing...

<div id="container">
  <div class="row">

    <div class="col-3 border p-2"><input class="form-control" type="text" style="width: 100%"</div>
    <div class="col-2 border p-2"><input class="form-control" type="text" style="width: 100%"</div>

    <div class="col-1 border p-2"><input class="form-control" id="targetset" type="number" style="width: 100%" onkeyup="percent()"</div>

    <div class="col-1 border p-2"><input class="form-control" id="actual_achieved" type="number" style="width: 100%" onkeyup="percent()"</div>
    <div class="col-1 border p-2"><input class="form-control " id="percentage" type="text" style="width: 100%" readonly</div>
    <div class="col-2 border p-2">
      <div class="row" id="rating">
        <div class="col-3 p-2 " id="col1"/>
        <div class="col-2 p-2 " id="col2"/>
        <div class="col-2 p-2 " id="col3"/>
        <div class="col-2 p-2 " id="col4"/>
        <div class="col-3 p-2 " id="col5"/>
      </div>
    </div>
    <div class="col-1 border p-2"><input class="form-control" type="text" style="width: 100%" placeholder="Eg. 25" onkeyup="percent()" id="weight"</div>

    <div class="col-1 border p-2"><input class="form-control" type="text" style="width: 100%" id="Rweight" readonly</div>

  </div>

  <!-- End of the financial section -->
  <div class="row" id="TRating">
    <div class="col-10 border">TOTAL RATING</div>
    <div class="col-1 border">45%</div>
    <div class="col-1 border">15</div>
</div>

</div>
<button class="btn btn-outline-primary mt-3 mb-3" id="button1">ADDSECTION</button>

    let rateColumn=document.getElementById('rating');
    let col1=document.getElementById('col1');
    let col2=document.getElementById('col2');
    let col3=document.getElementById('col3');
    let col4=document.getElementById('col4');
    let col5=document.getElementById('col5');
    
    const rated =document.createElement('span');
    rated.innerHTML=rating;
    
    //CALCULATING TARGET PERCENTAGE
    function percent(){
        let hidden2;
        // document.querySelector('input[type="hidden"]') .value
        var weighting=document.getElementById('weight').value;
        var Targetset = document.getElementById('targetset').value;
        var actual_achieved = document.getElementById('actual_achieved').value;
    
        //calculating weighted rating
        function weight(hidden2){
            var weightedRating=weighting*hidden2;
            document.getElementById('Rweight').value=weightedRating;
        }
    
        //calculating percentage target
        var percentage = (parseInt(actual_achieved) / parseInt(Targetset))*100;
        // console.log(percentage)
        if(!isNaN(percentage)){
        document.getElementById('percentage').value=percentage;
        }
    
        //DETERMINING RATING
        if(percentage>=120){
            col5.appendChild(rated);
            hidden2=5;
            weight(hidden2)
        }
        else if(percentage>=101 && percentage<=119 ){
            col4.appendChild(rated);
            hidden2=4;
            weight(hidden2)
    
        }
        else if(percentage===100){
            col3.appendChild(rated);
            hidden2=3;
            weight(hidden2)
           
        }
        else if(percentage>=80 && percentage<=90 ){
            col2.appendChild(rated);
            hidden2=2;
            weight(hidden2)
        
        }
        else if(percentage<79){
            col1.appendChild(rated);
            hidden2 = 1;
            weight(hidden2)
    
        }
        // console.log(hidden2)      
    }    

Answer 1

Why you don't use DOM function like:

document.getElementById("where to insert").insertAdjacentHTML('beforeend', row);

or other DOM functions to insert nodes to HTML?