Javascript 通过获取更改项目

我正在try 在javascript中创建一个星形按钮，当你点击它时，它会附加到重要项目的列表中.但当我点击按钮时，如你所见，在我要求将‘重要’更改为真后，我要求打印它是假还是真，但它继续打印假，即使我已将其更改为真.我做错了什么？ 如果有任何帮助我将不胜感激

 const second_element = document.createElement('div')


 second_element.innerHTML = `<div style="display: inline-block; width: 5%;"> <button style="background-color: ${read}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
    </svg> </button> </div>`;

second_element.addEventListener('click', function() {
    console.log("clicked")
    fetch(`/emails/${email.id}`, {
      method: 'PUT',
      body: JSON.stringify({
          important: true
      })
    })
    .then( () => { 
      console.log(email.important)
      load_mailbox('inbox')
    })
  })

document.querySelector('#container').append(second_element);