String (direct link to modal) gets repeatedly appended to URL

Question

I have some code where the user clicks on an email icon, Outlook opens up, and it contains a link that redirects them to a specific Bootstrap modal.

However, if the user clicks on the re-direct link and then goes through the email icon process again, the url in the email looks like this:

https://website.com/page.aspx/#training-Modal/#training-Modal

It also happens on the page:

The link will still redirect the user properly, but it's confusing to look at.

How can I prevent the modal's hash from being appended repeatedly? I believe the problem lies with the $.each in file.js, but since I'm using it to show every training item I'm wondering if there's something I can edit in index.js to prevent the loop from occurring. Don't know if e.preventDefault or similar would work.

---

index.js:

// this function is working on the page, but in the email the long url is still happening
function revertToOriginalURL() {
    let original = window.location.href.substr(0, window.location.href.indexOf('/')) // #
    history.replaceState({}, document.title, original);
}

$('.modal').on('hidden.bs.modal', function(e) {
    revertToOriginalURL(e);
});

$(document).ready(function() {
    if(window.location.href.indexOf('#training-Modal') != -1) {
        $('#training-Modal').modal('show');
    } else if(window.location.href.indexOf('#announcements-Modal') != -1){
        $('#announcements-Modal').modal('show');
    }
});

---

file.js:

       $.each(faqs, (idx, val) => {
         $("#training-content > ul").append(
                "<li data-topics='" +
                    val.Subcategory.results +
                    "'><a href='#faqItem" +
                    idx +
                    "' data-toggle='collapse'>" + 
                    val.Question + "&nbsp;&nbsp;" +
                    `<a href="mailto:?subject=Dept Training&body=Please review the Dept Training item pertaining to: ${val.Question}%0D%0A${deptUrl}/#training-Modal" target='_top'><i class='far fa-envelope'></i>` + "</a>" +
                    val.Answer +
                "</li>"
            )
         })

// the code for the #announcements-Modal looks almost exactly the same, except /#announcements-Modal is appended at the end of deptUrl

Answer 1

Update: I performed a bit of a janky fix, but it's working for me. Simply put, I call revertToOriginalURL(); in the if/else:

$(document).ready(function() {
    if(window.location.href.indexOf('#training-Modal') != -1) {
        $('#training-Modal').modal('show');
        revertToOriginalURL();
    } else if(window.location.href.indexOf('#announcements-Modal') != -1){
        $('#announcements-Modal').modal('show');
        revertToOriginalURL();
    } else {
        console.log('no modal on load')
    }
});

This prevents the modal window hash from being repeatedly appended in the body of the email.