我很难解决这个问题。代码如下：

const postBox = document.querySelector('#posts')

const getUser = function(id, val) {
    $.ajax({
        type: 'GET',
        url: `/api/user/${id}`,
        success: function(response){
            val.innerHTML = `Posted by: ${response.username}`
        },
        error: function(error){
            console.log(error)
        }
    })
}

const getPosts = () => {
    $.ajax({
        type: 'GET',
        url: '/api/posts/',
        success: function(response){
            console.log(response)
            response.forEach(el => {
                postBox.innerHTML += `
                    <div class="card mb-2">
                        <div class="card-body">
                            <h5 class="card-title">${el.title}</h5>
                            <p class="card-text">${el.body}</p> 
                            <p class="card-text">${el.date}</p>              
                        </div>
                        <div class="card-footer">
                            <p class="card-text" id='author${el.id}'></p>
                        </div>
                    </div>
                `
                const authorBox = document.querySelector(`#author${el.id}`)
                console.log(authorBox)
                getUser(el.author, authorBox)             
            })
        },
        error: function(error){
            console.log('error')       
        },
    })
}

getPosts()

只有最后一个项目有“作者发布”我似乎不明白为什么只有最后一个项目有它。即使当我检查它时，它也有“作者发布”的内部html和内部文本，但它没有显示。
以下是输出：
测试1
测试1
2021-07-12
测试2
测试2
2021-07-12
测试3
测试3
2021-07-12
测试4
测试4
2021-07-12
发帖人：凯里奥斯
如何确保所有authorbox的内部html都已更改？