Modal form won't open again until page is refreshed

Using Django Templates & Frontend
1

I am using javascript to show or hide a modal form. Below is the script of the same,
Got from: Modal forms with Django+HTMX | Good Code Smell

Javascript

; (function () {
    const modal = new bootstrap.Modal(document.getElementById('modal')) 

    htmx.on('htmx:afterSwap', (e) => {
        console.log('htmx:afterSwap', e)
        if(e.detail.target.id === "dialog")
            modal.show()
    })

    htmx.on('htmx:beforeSwap', (e) => {
        console.log('htmx:beforeSwap', e)
            if (e.detail.target.id === "dialog" && !e.detail.xhr.response) 
                modal.hide()
    })
}
    )()

Problem now is, It was working well when only 1 modal form was there in the application. Now, after adding another new modal form to application, I could only open the modal form only once. i.e. Even after closing the modal form unable to open it again which was not the case before when I could close and open the modal form any times without the page being refreshed.
Now page needs to be refreshed every time after its been closed.

Following is the code which opens the modal form through a button click. and both the buttons are present in the same page.

entryform.html

<button type="button" class="btn btn-secondary mb-4" 
                                   hx-get="{% url 'masters:add-party' %}" 
                                   hx-target="#dialog"> +
   </button>

 <button type="button" class="btn btn-secondary mb-4"  
                         hx-get="{% url 'entry:availability' %}" 
                         hx-target="#dialog">
                         Show availability
 </button>

The base.html codes for modal form is as below,

    <div id="modal" class="modal fade" tabindex="-1"> 
      <div id="dialog" class="modal-dialog" hx-target="this">
          <!-- Inject modal content -->
      </div>
    </div>

The error in the console is as below,

htmx:targetError
St @ htmx.org@1.8.4:1
Q @ htmx.org@1.8.4:1
Y @ htmx.org@1.8.4:1
lr @ htmx.org@1.8.4:1
(anonymous) @ htmx.org@1.8.4:1
i @ htmx.org@1.8.4:1

How to fix this issue? Kindly help. Thank you!

2

You must never have two elements with the same ID attribute in the same page at the same time. There’s not enough detail here for me to be sure, but that’s what this looks like to me. (Either that or you’ve got a situation where that ID doesn’t exist in the page at all.

Examine the HTML in the browser after that error appears to see which of these conditions are happening.

3

Only 1 modal form can be opened from that page. To open the another modal, the first one has to be closed. So the id of the modal will be used only once at a time.

Still I tried creating 2 modal ids and made the modals use individual ids. added additional javascript for show/hide. But the issue still exists. The modals open only once.

Please let me know which more details would you need? - Thank you!

4

Closing a modal does not remove it from the DOM, it only hides it. That html element with that ID still exists.

More than what’s reasonable to post in a message here, unless you’re able to produce a minimal example that demonstrates this behavior.

What you need to is:

So the first step is determining whether you have zero elements with id=“#dialog” or more than one.

Posting the complete details of this implementation would help.