I have the following HTML. Its a form inside of a modal window:

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ....
            </div>
       </form>
    </div>
</div>

Whenever the form is opened, I want to render a fresh version of the form, free of any old inputs or error messages. The following handler gets the data for hidden fields plus the form's HTML I can obtain the data for the form along with the raw HTML for the form via an Ajax request:

$(document).on('click', '#por-detail-tbl .dropdown-menu', e => {

    // This route will get fresh form HTML also.
    $.get(`/projects/${$(e.target).attr('project-id')}`, res => {
        $('#requestModal').replaceWith(res.html)

        ...more code here to populate hidden fields...
    })
})

I would expect the $('#requestModal') element to be replaced with whatever res.html is (in this case, a new version of the form). Instead, res.html is getting inserted as the last element in the document body. The old $('#requestModal') is still there.

Here is a snippet from res.html:

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
    <div class="modal-dialog wide-modal" role="document">
        <form novalidate>
            <div class="modal-content">
            ...
            </div>
        </form>
     <div>
</div>

I'm able to use this technique successfully in other Ajax callbacks. Any ideas why this one is behaving strangely?