How can I addClass / removeClass multiple times?
<p>I want to display a loading icon via CSS on my page when a user sends data via ajax, and then remove this loading icon once the ajax call is complete.  The page successfully shows the icon once, but not again without a page refresh.  However, the ajax call is being completed successfully for multiple calls.  Here is my code:</p>

<p>Relevant Html:</p>

<pre><code>&lt;head&gt;
&lt;link rel="stylesheet" href="~/Content/Loading.css" type="text/css&amp;quot; id="loading_gif"/&gt;
&lt;/head&gt;
...
...
&lt;button type="button" class="btn btn-success" id="button"&gt;Import&lt;/button&gt;
...
...
&lt;div class="modal"&gt;&lt;!-- Placed at bottom of page --&gt;&lt;/div&gt;
</code></pre>

<p>Ajax:</p>

<pre><code>$(document).ready(function () {
    $('#button').click(function () {                        
        $.ajax({
            type: "POST",
            url: '@Url.Action("Submit")',
            data: { 
              //submit data via jQuery 
            },
            dataType: 'json',
            beforeSend: function() {
                $body.addClass("loading");                        
            },
            success: function (data) {                        
                //render a partialView                    
            },
            complete: function () {
                $body.removeClass("loading");
            }
        });                
    });
}(jQuery));
</code></pre>

<p>CSS:</p>

<pre><code>.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 128, 128, 128, .5 ) url('../img/ajax-loader-bar.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
  display: block;
}
</code></pre>