Dynamically filling drop downs on each row of table

Question

I have a table with n number of rows depending on results. There is a drop down on the top of the page. Depending on the selection of that drop down I want to dynamically fill a column on each row with a drop down of its own, based off of an xhttp.response.

This is what I have so far:

function getJobs(taskID){

        var xhttp = new XMLHttpRequest();
        var url = "dynamicdd.php";
        var data = new FormData();
        data.append('taskID', taskID);
        xhttp.open('POST', url, true);
        xhttp.send(data);
        $('#cTable tr').each(function(){
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("testSelect").innerHTML = xhttp.responseText;
                    }
                }
            });
        }

I'm able to change the first row successfully, but subsequent rows don't. I've tried $(this).find(select:eq(0)).html() in replace of the document.getElementById() but no luck. I feel like I'm close but lack expertise in jquery/javascript. Thanks for your help.

Answer 1

You are re-assinging onreadystatechange function for each table row which is wrong,

First assing the function for what it must do, then send the request then wait for the response ready then seek the element you want and replace element html with response text as below,

function getJobs(taskID){

    var xhttp = new XMLHttpRequest();
    var url = "dynamicdd.php";
    var data = new FormData();
        data.append('taskID', taskID);
    xhttp.open('POST', url, true);
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            $('#cTable tr').each(function(index, element){
                $(element).find('#testSelect').html(xhttp.responseText);     
            }
        }
    });
    xhttp.send(data);
}