Set the value of a td according to select (Javascript and Flask)

Question

Sorry for my bad English in advance. I'm new to using Javascript and Flask, but I'm trying to develop an application to manage the transference of clients between managers of a bank.

So far, I suscesfully created the table with the companies of a manager portfolio and in this table the superior can select the manager that will receive the account. In this point, when the new manager is selected, I've created a javascript function to check if the companie has an account in the new spot. The function is working, but only for the first row!!!

this is the js script

<script>
            let destino_selec = document.getElementById("{{ row['ID_ROW_GRTE'] }}");
            let destino_cc = document.getElementById("cc_dest_{{ row['ID_ROW_GRTE'] }}");

            destino_selec.onchange = function(){
                inicial = destino_selec.value.indexOf("(");
                final = destino_selec.value.indexOf(")");
                cd_grte_para = destino_selec.value.substring(inicial+1,final);
                // alert(cd_grte_para);
            
                fetch('/select_cli/' + cd_grte_para).then(function(response){
                    response.json().then(function(data){
                        //let optionHTML = '<option value="" disabled selected>Selecione o Gerente</option>';
                        let optionHTML = '';
                        count  = Object.keys(data).length;
                        if (count > 0) {
                            optionHTML += '<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>';
                        } else {
                            optionHTML += '<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>';
                        }
                        // destino_cc.innerHTML = optionHTML;
                        destino_cc.innerHTML = optionHTML;

                        });
                    });
                }   
    </script>

This is the html piece:

{% block main %}
<span><br></span>
<form action="" method="post">
    <div class="row">
        <div class="col-5"><h2 class="text-left" 
            style="padding: 10px ;border-width: 10px;border-left: solid #9d1047"><b>Solicitação de tranferências</b></h2></div>
        <div class="col-7" style="padding: 10px "><input type="submit" value="Solicitar" class="btn btn-primary fw-bold mb-2" 
            style="left: 86%; position:relative; z-index: 2; background-color: #9d1047; border-color:#9d1047"/></div>       
    </div>
    
<table id="data" class="tabela-historica">
    <thead>
        <tr>
            <th width=15%   rowspan=2   >Cliente    </th>
            <th width=19%   rowspan=2   >Origem     </th>
            <th width=1%    rowspan=2   >cc         </th>
            <th width=15%   colspan=2   >Saldo      </th>
            <th width=19%   rowspan=2   >Destino    </th>
            <th width=1%    rowspan=2   >cc         </th>
            <th width=10%   rowspan=2   >Movimento  </th>
            <th width=15%   rowspan=2   >Motivo     </th>
            <th width=5%    rowspan=2   ><span>Selecionar  </span><input type="checkbox" onClick="toggle(this)" /></th>
        </tr>
        <tr>
            <th>Atual</th>
            <th>Melhor Ponto</th>
        </tr>
    </thead>

    <tbody height: 100%>
        {% for row in tbl_cli %}
        <tr>
            <td>{{ row['NM_CLI'] }} <br> 
                {% if row['NM_CLI'] == row['NM_GRP_FAMILIAR']   %}
                    
                {% else %}
                    <b> Família: </b>{{ row['NM_GRP_FAMILIAR'] }}
                {% endif %}
                
                <!-- <b>Família: </b>{{ row['NM_GRP_FAMILIAR'] }} </td> -->
            </td>
            <td> <b>Ger: </b>{{row['NM_ABDO_GRTE_DE']}} ({{ row['CD_GRTE_DE'] }})<br> <b>Ag: </b> {{ row['NOMEAG_DE'] }} ({{row['CODAG_DE']}}) </td>
            <!-- <td>{{row['cc_orig']}} </td> -->
            
            <td style="text-align: center">
            {% if row['CTA_CORRENTE'] %}
                <i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>
            {% else %}
                <i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>
            {% endif %}
            </td>
            <td>{{row['SLD_TOT_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MM']}} </td>
            <td>{{row['SLD_TOT_MAX_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MAX_MM']}} </td>
            
            <td>
                <select class="form-select" style="font-size: 10px; width: 100%" name="ger_escolhido" id="{{ row['ID_ROW_GRTE'] }}">
                    <option value="" disabled selected>Selecione o gerente destino</option>
                    {% for ger in tbl_codger %}
                        <option style="font-size: 10px;" name="{{ ger['CHAVE'] }}"">{{ ger['CHAVE'] }}</option>
                    {% endfor %}
                </select>
            </td>
            <td id="cc_dest_{{ row['ID_ROW_GRTE'] }}" ></td>
            
            <td>if segmento <br> if agencia </td>
            <td> <textarea class="form-control" name="motivo" style="font-size: 10px;" placeholder="Descreva o motivo..."></textarea> </td>
            <td style="text-align: center;"><input type="checkbox" value="{{ row['ID_ROW_GRTE'] }}" name="boxes"/></td>
        </tr>
        {% endfor %}

    </tbody>
</table>
</form>

{% endblock %}

Could you help me to point where I'm making an error?

Answer 1

Think of it this way

1. In your html, you are looping over a collection of items and creating rows based on those items.

2. In your script code, you are NOT looping. You have simply created a single instance of your script code.

3. To use your code as is, you have 2 options

a) Attach that script code inside the loop in your html i.e. your html loop will create the table row and also attach the script code to it.

b) Keep your html loop as is, then also put the script code in a loop i.e. do something like

{% for row in tbl_cli %}
    <Script>.....
{% endif %}

4. A better option would be to change your script so that it is triggered on a class i.e. change your script code to something like below. The advantage is that you don't have to loop the script (as I mentioned before). The script below is saying - find all elements with a class of form-select and for each one of them, attach the code to the onchange event.

document.querySelectorAll(".form-select").forEach(function(element) {
    element.onchange = ......
})

Because your script will most likely 'exist' before the table rows are created, you should 'attach' it to something that exists at the same time as when your script is created. This means you do something like

document.querySelectorAll("table#data tr.form-select").forEach(function(element) {
    element.onchange = ......
})