I am working on DJango which also Involves JavaScript I need to change background color of an element after a certain action but am unable to do so. Below code is the only Javascript file used in the project.

function create_email(email){
const element = document.createElement('div');
element.id = "email";
element.innerHTML= `<b>${email.sender}</b>: ${email.subject}<p id='right' ><button id ="view" 
onclick="view_mail(${email.id})"class="btn btn-primary">View</button>${email.timestamp}<button 
id="archive" onclick="archive(${email.id})" class="btn btn-secondary">Archive</button><p>`;
element.addEventListener('click', function() {
console.log(`This message is sent by ${email.sender}`)
});
document.querySelector('#emails-view').append(element);
}

Above I created an Element div using Javascript and assign id email , Later I will be changing this elements css property:-

function read(id){
fetch(`/emails/${id}`, {
method: 'PUT',
body: JSON.stringify({
    read: true
})
})
document.getElementById("email").style.backgroundColor="red";
}

In this function I tried changing the background color of the element but is not changing anything. Note that this function is running as I have tried changing other elements property in this function only and they worked. The element email div is within the div with id emails-view . And I am able to change the background of emails-view div but not email div that is within this div block.