Непрозрачность не возвращается к 1, когда я устанавливаю видимость: видимая

В настоящее время я создаю веб-сайт. Я создал кнопку редактирования для сообщений, и когда нажимается кнопка сохранения для этого редактирования, я отправляю AJAX-запрос на страницу, которая соответствующим образом обновляет базу данных. Хотя это работает очень хорошо, я подумал, что значок загрузки будет очень хорош. Итак, я создал этот значок загрузки:

echo "<div id=\"loading-cover\" class=\"loadback\"><img style=\"position: relative; top: 25%; display: block; margin: auto auto;\" src=\"/loading.gif\"></div>";
   

Свойство видимости скрыто от style.css.

Я возвращаю его к отображению всякий раз, когда я собираюсь отправить запрос AJAX. Вот мой код для сохранения правок:

function saveEdit(postid){
var loading = document.getElementById("loading-cover");
loading.style.visibility = "visible";
var x = document.getElementById("desc-" + postid );
x.setAttribute("contenteditable", false);
x.classList.remove("active-editpart");
document.getElementById("editbtn-"+postid).classList.add("savebtn-active");
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE) {
loading.style.opacity = "0";

loading.style.visibility = "hidden";
}};
//xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerHTML);
xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerText);
xhr.send();
x.innerHTML = x.innerText;
document.getElementById("desc-raw-" + postid ).innerHTML = x.innerText;
}

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