Why are multiple bootstrap modals being rendered after HTMX hx-get?

I have a Django page using HTMX to populate some bootstrap styled tabs (Members, Events and Contacts). 'hx-get' is used to load the desired page content into the DOM. On the Members page, I have a button that opens a bootstrap modal form when clicked for the user to add a member.

The issue is that the number of times the modal is rendered to the DOM when the button is clicked corresponds to the number of times the Members content is loaded. If the Members page is rendered twice (navigating from Members tab to Events tab, then back to Members), two modals appear in the DOM and so on.

I initially thought it may be caused by the modal form also being rendered with hx-get. However, I've replaced the modal form with a basic modal on the same page and the issue persists.

Why is only the modal being rendered multiple times? The members page is only being rendered once.

Tabs code:

<div class="container">
 <div class="row">
  <div class="nav flex-column nav-pills me-3 col" role="tablist" aria-orientation="vertical" 
    id="tabs" hx-target="#tab-contents" _="on htmx:afterOnLoad take .active for 
      event.target">
      <button type="button" id="members-btn" role="tab" aria-controls="tab-contents" aria- 
       selected="true" hx-get="{% url 'members' %}" class="nav-link active">
        Members
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'events' %}" class="nav-link">
        Events
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'contact_log' %}" class="nav-link">
        Call Log
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'files' %}" class="nav-link">
        Files
      </button>

 </div>

  <div class="tab-content col-10" id="tab-contents" role="tabpanel" hx-get="{% url 'members' 
  %}" hx-trigger="load">

  </div>

 </div>
</div>

Members page:

<div id="content" class="relative">
        
        <table class="table table-hover caption-top">
            
            <caption>Members</caption>
           
            <thead>
                <tr>
                    <th scope="col" >
                        Title
                    </th>
                    <th scope="col" >
                        Name
                    </th>
                    <th scope="col" >
                        Email
                    </th>
                    <th scope="col" >
                        Date Joined
                    </th>
                    <th scope="col" >
                        Last Login
                    </th>
                    <th scope="col" >
                        
                    </th>
                    <th scope="col" >
                        
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for member in members %}
                <tr>
                    <th scope="row" class="px-6 py-4">
                        {{member.title}}
                    </th>
                    <td class="px-6 py-4">
                        {{member}}
                    </td>
                    <td class="px-6 py-4">
                        {{member.user.email}}
                    </td>
                    <td class="px-6 py-4">
                        {{member.user.date_joined}}
                    </td>
                    <td class="px-6 py-4">
                        {{member.user.last_login}}
                    </td>
                    <td class="px-6 py-4">
                        <button  class="btn btn-primary">Edit</button>
                    </td>
                    <td class="px-6 py-4">
                        <button hx-delete="{% url 'delete_member' pk=member.user.id %}" hx-target="#content" hx-confirm="Are you sure you wish to remove {{member.first_name}} {{member.last_name}}" class="btn btn-danger">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <button data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Add Member</button>
    </div>
    
        
        <div class="modal fade" id="myModal" >
            <div id="dialog" class="modal-dialog" hx-target="this">
                <div class="modal-content">
         
                        <div class="modal-header">
                          <h5 class="modal-title fs-5" id="memberModalLabel">Add member</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Hello</p>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                          
                        </div>
                    </div>
            </div>
        </div>

Back to Top