I have a program that pulls from an API and displays the results on a table. What should be happening is that each row should be different data. However, when this runs, it adds the data with the ID of 4 twice, completely skipping over the data with the ID of 3. At first, I thought I must've goofed something up with the GET requests. I went to check, and turns out it is getting the data, but not adding it to the table. I moved all of the code to add to the table inside of the for loop, but the same problem happened. If it's any use, I'm using Tomcat to handle the API.

Attached is the function I use to add rows to the table.

function addRow(tableName, rowData) {
                for (var h = 0; h < rowData.length; h++) {
                    var ajaxRequest = new XMLHttpRequest();
                    ajaxRequest.onreadystatechange = function(){
                        if(ajaxRequest.readyState == 4){
                            if(ajaxRequest.status == 200){
                                let table = document.getElementById(tableName);
                                let row = table.insertRow(1);
                                var order = JSON.parse(ajaxRequest.responseText);
                                var cell0 = row.insertCell(0);
                                var cell1 = row.insertCell(1);
                                var cell2 = row.insertCell(2);
                                var cell3 = row.insertCell(3);
                                var cell4 = row.insertCell(4);
                                var cell5 = row.insertCell(5);
                                var cell6 = row.insertCell(6);
                                var cell7 = row.insertCell(7);
                                var cell8 = row.insertCell(8);
                                var cell9 = row.insertCell(9);
                                var cell10 = row.insertCell(10);
                                
                                cell0.innerHTML = order.id;
                                cell1.innerHTML = order.name;
                                cell2.innerHTML = order.time;
                                cell3.innerHTML = order.type;
                                cell4.innerHTML = order.creamerAmount + " " + order.creamerType;
                                cell5.innerHTML = order.sugarAmount;
                                cell6.innerHTML = order.coffeeType;
                                cell7.innerHTML = order.teaType;
                                cell8.innerHTML = order.hotChocolateType;
                                cell9.innerHTML = order.smoothieType;
                                cell10.innerHTML = order.protein;
                            } else {
                                //I'm aware this is bad, not sure how to handle it otherwise though...
                                h--;
                            }
                        }           
                    }
                    ajaxRequest.open('GET', 'http://localhost:13760/cafe/cafe/orders/' + rowData[h]);
                    ajaxRequest.send();
                }
                
            }   ```