I have the following code that I found here https://stackoverflow.com/a/60187153/16383273

function handleBackPress(event) {
  event.preventDefault();
  event.stopPropagation();
  $('.modal').modal('hide');
  $('.modal-backdrop').remove();
}

var closedModalHashStateId = "#modalClosed";
var openModalHashStateId = "#modalOpen";

window.location.hash = closedModalHashStateId;

$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);

$('.modal').on('show.bs.modal', function(e) {
  window.history.pushState('forward', null, './'+openModalHashStateId);
});

$('.modal').on('hide.bs.modal', function(e) {
  window.history.back();
});

I am using this code to close bootstrap modals using phone's back button. However, I found an issue here. This code closes all the modals open at once. This is irritating from the user's point of view. What I want to do here is that I want to close the bootstrap modals one by one. With the first back button clicked it should close the most recent one. The other modals should still remain active and displayed. On further clicking of back buttons it should keep closing further modals as per their opening sequence or as per which is currently displayed on the screen. How can I do this?