Div not showing after being hidden

Question

I have a loading spinner in a div that's shown while AJAX calls are being executed. On the first AJAX call, it shows and works as expected. In this case, the loading spinner is replacing placeholder content.

After the AJAX call finishes and the Html content is populated from the AJAX call, if the same function runs again, the loading spinner div won't be displayed. Everything else works as expected.

<div class="col-md-8>
    <div id="divForSectionPreview">
        <div class="loaderDiv">
            <center>
                <img src="~/Images/loadingSpinner.gif" alt="loading.." />
            </center>
        </div>
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>

Answer 1

Gabriel answered the question in the comments. I just needed to move the .loaderDiv element out of divForSectionPreview because, as he stated, the entire contents of divForSectionPreview were being replaced with the AJAX call, and divForSectionPreview is where .loaderDiv was.

<div class="col-md-8>
    <div class="loaderDiv">
        <center>
            <img src="~/Images/loadingSpinner.gif" alt="loading.." />
        </center>
    </div>
    <div id="divForSectionPreview">
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>