Слушателю событий требуется два щелчка мышки перед обновлением DOM.

На моей веб-странице есть таблица с данными, извлеченными из базы данных - это в значительной степени клон базы данных. Каждая строка в таблице имеет одну кнопку удаления и одну кнопку обновления, которые позволяют пользователю удалить соответствующую строку базы данных или обновить столбцы, используя предоставленную форму.

Моя проблема в том, что кнопки удаления и обновления не работают должным образом. Первый щелчок вносит соответствующие изменения в базу данных, но таблица остается неизменной, пока кнопка не будет нажата второй раз.

let loadUsers = function () {
fetch("http://localhost:8080/users").then(function (response) {
    response.json().then(function (data) {
    // generate table and delete/update button html
    data.forEach(function (user) {
        deleteButton = document.querySelector("#btn-del-user);
        deleteButton.onclick = function () {
        if (confirm("Are you sure you want to delete " + user.firstname + "?")) {
            deleteUser(user.id);
            loadUsers();
        }
        });
    }
    });
};

loadUsers();


document.addEventListener('submit', function(event) {
  if (!event.target.matches('#update-user-form')) return;

  let elements = document.querySelector('#update-user-form').elements;
  let inputs = {
    "firstName": elements.firstName.value,
    "lastName": elements.lastName.value,
    "email": elements.email.value,
    "password": elements.password.value
  };
  let body = "";

  // create a URL-encoded string from form inputs
  Object.keys(inputs).forEach(function (key, i) {
    body += key + "=" + encodeURIComponent(inputs[key]);
    if (i < Object.keys(inputs).length - 1) {
      body += "&";
    }
  });

  let id = elements["user-id"].value;

  fetch('http://localhost:8080/users/' + id, {
    method: 'UPDATE',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

loadUsers();
});

Странно то, что у меня есть отдельная форма на странице, которая позволяет мне добавлять новые строки в таблицу / базу данных, и прослушиватель этой формы также вызывает loadUsers(), но он успешно обновляет DOM после одного щелчка.