Bootstrap modal backdrop not closing after ajax call

Question

I have a multiple modal in one page. I used django to loop thru all the thumbnail and whenever the user clicks the thumbnail, the full size photo will appear as a modal. However, when I try to close the modal, the backdrop remains. That makes the user unable to click anywhere on the screen. The other thing that made me confuse is that my modal works properly on localserver. But when I try it on Pythonanywhere, the problem begins. I have attached below my code. Thanks for the help.

<div class="container">
            <div class="modal modal-class-{{c.uuid}} fade" id="modal-id-{{c.uuid}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="{{c.uuid}}-exampleModalLabel">Gallery</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img class="d-block w-100" src="{{c.chapter_photo.url}}" alt="First slide">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>