Ajax loading screen not showing after first time

I am using AJAX to call a servlet from my webpage. So far so good, I have added some code to show a loading screen while the servlet is working but that works only the first time, after that, the servlet is called and I can change the cursor but the waiting screen is not working

CSS

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.75;
    background-color: #ffffff;
    -webkit-transition: all .5s ease;
    z-index: 3000;
    display:none;
    vertical-align: middle;
    text-align: center;
  }
  #loading-img {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #297bda;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;
  }

HTML

<div id="loading">
  <div id="loading-img"></div>
</div>

Javascript

$('#compare').click(function() {
//just the relevant part

  $('#loading').show();
....
});

I am calling to

$('#loading').hide();

in the .done(function (data).

As I said, the code is executed but the loading screen only loads the first time. In fact, the second time and further I am receiving null when trying to resolve the loading div. I have also tried with

       document.getElementById("loading").style.visibility = "hidden";
       document.getElementById("loading").style.display = "none";

Instead of using the hide() but the same result.

Any idea?