Изменение выбора SelectField (s) с помощью JavaScript

Question

Я хочу визуализировать форму (используя Flask-WTForms) в зависимости от списка строк. Этот список строк указывает на DecimalField (s), а также на ключи с различными значениями в аргументе выбора SelectField. Цель состоит в том, чтобы отобразить (или несколько) DecimalField, скажем, Температура, а рядом с ним SelectField только с единицами температуры.

Вот как выглядит список кортежей для выбора SelectField и полей, которые будут определять то, что будет отображаться:

units_choices = [('temperature', '°C'), ('temperature', 'K'), ('temperature', '°F'), ('pressure', 'MPa'), ('pressure', 'bar'), ('pressure', 'psia'), ('fugacities', 'mol/l'), ('fugacities', 'mol/m3'), ('fugacities', 'g/ml'), ('fugacities', 'kg/m3')]
fields_to_show = ['temperature', 'pressure', 'fugacities']

Это мои декларации формы:

class UnitForm(FlaskForm):
    unit_field = FieldList(SelectField(label='', choices=units_choices))

class AnalysisForm(FlaskForm):
    temperature = DecimalField(label="Temperature")
    pressure = DecimalField(label="Pressure")
    fugacities = DecimalField(label="Fugacities")
    units = FieldList(FormField(UnitForm))

Это моя функция динамического просмотра, позволяющая выделить unit_choices по тем же клавишам:

@app.route('/units/<field>') 
def units(field):
    units_choices_new = [ (key, value) for (key, value) in units_choices if (key == field) ]
    units_array = []
    for unit in units_choices_new:
        unit_dict = {}
        unit_dict['key'] = unit[0]
        unit_dict['value'] = unit[1]
        units_array.append(unit_dict)
    return jsonify({'units': units_array})

А это мой HTML-рендеринг и код JS:

<div class="container">

    <form method="POST" class="form" role="form">
        {{ form.csrf_token }}
        {% for i in form.units %}
            {{ i.csrf_token }}
            {% for j in i.unit_field %}
                {{ wtf.form_field(j) }}
            {% endfor %}
        {% endfor %}
    </form>    

    <script>
        const field_select = {{ fields_to_show|safe }};

        for (let i=0; i < field_select.length; i++) {

            let field = field_select[i];
            let units_select = document.getElementById('units-'+i+'-unit_field-0');
            console.log(field); //print temperature, pressure and fugacities


            window.onload = function() { 

                fetch('/units/' + field).then(function(response) {
                    alert(field); //only shows fugacities :(
                    response.json().then(function(data) {
                        let optionHTML = '';                        
                        for (let unit of data.units) {
                            optionHTML += '<option value="' + unit.key + '">' + unit.value + '</option>';
                        }
                        units_select.innerHTML = optionHTML;
                    })     
                });
            }
        }

    </script>   
</div>

Я почти все заработал (работает нормально для одного поля), но когда две или более строки полей добавляются в список fields_to_show, устанавливается только последнее обещание, т. Е. Для этого примера обновляется только SelectField оператора fugacities. его фактические единицы.