Every button triggers a unique modal window
Encountering an unusual problem with Bootstrap 5 modal functionality. Within a webpage displaying a list of database entries (refer to the screenshot), each entry features three buttons to open corresponding modals (view, edit, other).
Upon initial page load, clicking the 'view' button correctly displays the content within its modal body. However, subsequent attempts to open the 'edit' or 'other' modals after closing the 'view' modal result in displaying the content of the 'view' modal instead of the expected content - despite the correct title appearing in the header of the 'edit' and 'other' modals (implying the correct modal code usage).
Refreshing the page and clicking the 'edit' or 'other' buttons first (without clicking 'view' initially) correctly displays the respective modal contents. Yet, once the 'view' modal is opened and closed, subsequent attempts to open the 'view' and 'other' modals continue displaying the 'view' modal content, regardless of the modal header title.
The code snippet below is provided. Since I lack experience in JavaScript, I suspect the issue to lie within that domain. Any insights or advice are welcomed.
HTML Table Code:
<table >
[...]
</table>
Modal HTML:
[...]
Supporting Javascript:
[...]
Extraneous codes, such as DataTables plug-in, have been removed to focus solely on the core code and avoid potential interference from third-party components.