I am working on project, from datatable i have button, when user clicks on it, it will open popup and shows pdf, (which i am rendering). Once user closed modal, next time if he opens button, it will show previous data. its not refreshing.

I have tried $(this).removeData('bs.modal'); it doesn't worked for me.

Here is my Modal code. Any idea how we can refresh only modal?

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-xl">
    Modal content
    <div class="modal-content">
        <div class="modal-header">
            Preview
            <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <div id="my_pdf_viewer">
                <div id="navigation_controls" style="text-align:center">
                    <button class="btn btn-primary" id="go_previous">Previous</button>
                    <input id="current_page" value="1" min="1" max="5" type="number" />
                    <button class="btn btn-primary" id="go_next">Next</button>
                </div>
                <br />
                <div id="zoom_controls" style="text-align:center">
                    <button class="btn btn-primary" id="zoom_in">Zoom In (+)</button>
                    <button class="btn btn-primary" id="zoom_out">Zoom Out (-)</button>
                </div>
                <div id="canvas_container">
                    <canvas id="pdf_renderer"></canvas>
                </div>
            </div>
            <div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>