Web-page is populating the last element in a list multiple times

Question

I am building a car sales app, in which I need to list the names of the people who have posted a job on to my UI.

Here is the source code, that calls from my API to get the name of the job poster

function populate_with_jobs () {
    // for (var job of job_feed) {
    //     make_get_call(/user?userId=${job.creatorId})
    //     do_job_timeout(job)
    // }

    job_feed.forEach(element => {
        make_get_call(/user?userId=${element.creatorId})
        do_job_timeout(element)
    })


}

function do_job_timeout(job) {
    setTimeout(() => {
        create_job_div(job, response_dict.name)
    }, 500)
}


function create_job_div(job,name) {
   const job_details = document.createElement('div')
    const job_creator = document.createElement('p')
    job_creator.style.textDecoration = 'underline'
    job_creator.style.color = '#0000EE'
    job_creator.innerText = By: ${name}
}

Over here, I populate my jobs page, via an API which returns the correct reponse. In my do-job-timeout function, I create my job div that contains the name of the person who created a job. Over here I have a timeout to ensure the response from the API is complete before doing anything else.

So for example lets say in my List I have the names

["James", "Janus", "Alexandar"]

In the UI only the last name is being populated for all the jobs

Job 1 Created by: Alexandar

Job 2 Created by: Alexander

Job 3 Created by: Alexander

What could be my problem?

I tried to use a innerHTML += "By ${name}" to ensure nothing is being overwritten

I have also tried a forEach and the Let statement