AJAX/PHP Dependent dropdown on column output is not shown when put increment in selector

Question

I have a dynamic table generated by number of row user input. For each row, first column has a dropdown list while second column dropdown list value is dependent on first column selected value. eg;

Row Number by user: 3

|     Col1  |    Col2      |
|:----------|-------------:|
| dropdown0 | dropdownExc0 |
| dropdown1 | dropdownExc1 |
| dropdown2 | dropdownExc2 |

However, in my ajax, when I put incerement on my selector, the response dropdown value will not be displayed on second column. I'm a beginner in using PHP/AJAX would appreciate any help!

<script>
        var rowNum = document.getElementById('rowCount').value;

        for (var i = 0; i < rowNum; i++){
            $('#dropdown' + i ).on("change", function () {
            
            var requestid = $(this).val();
                
                $.ajax({
                    type: "POST",
                    url: "req-exchange.php",
                    data: {req_id:requestid},
                    success: function (response) {
                        console.log(response);
                        $('#dropdownExc'+i).html(response);
                    }
                });

            });
        }

</script

from console.log(response)

<option value="">--Select Exchange--</option><option value="eS">Exchange South</option><option value="eN">Exchange North</option>

I have been searching answers many times but nothing works, not sure if my logic is wrong instead. In console.log(response), the output return is correct just that it is not reflecting on my dropdown. I'm a beginner in using PHP/AJAX so I would really appreciate any help!

Answer 1

Solved, I just changed from var i=0 to let i=0 and it can now be displayed.