Bootstrap nested modal repeats content

Question

I am trying to create a way to easily add a confirmation modal to any button I like using data attributes, jQuery and the bootstrap 5 modal functionality. However currently I am facing a problem where when I use this confirm inside of a modal, and I close the parent modal after opening the child confirmation one, when I open the child one again, it repeats the content of the parent modal instead. (You can see this behaviour in the GIF)

This is my code for showing the confirmation modal:

$(document).ready(function () {
    var buttons = $('*[data-needs-confirm="true"]');
    for (var button of buttons) {
        button.addEventListener('click', function (event) {
            confirm_action(
                event,
                button,
                $(this).data('confirmTitle'),
                $(this).data('confirmMessage'),
                $(this).data('optionOne'),
                $(this).data('optionTwo')
            );
        })
    };
});

function confirm_action(event, button, title, message, option_1, option_2) {
    event.preventDefault(); // Makes sure the form isn't send yet
    var form = button.closest('form');
    var modal_html = `
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">${title}</h4>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>${message}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="confirmYesButton">${option_1}</button>
                    <button type="button" class="btn btn-secondary" aria-label="Close" data-bs-dismiss="modal">${option_2}</button>
                </div>
            </div>
        </div>
    </div>`;

    // Add modal to body content and show it
    $('#content').append(modal_html);
    var modal = $('#confirmModal')
    modal.modal('show');

    $('#confirmYesButton').one('click', function (event) {
        modal.modal('hide');
        console.log('confirmed yes');
        form.submit(); // Sends the form
    })

    $('#content').remove(modal); // Remove modal from html
}

And this is how I use it (this is using a django template, and is injected into the website some other manner):

{% load i18n %}
{% load static %}
<div class="modal-header">
  <h4 class="modal-title">{% blocktrans %}Inschrijven voor de {{ lesson_title }}{% endblocktrans %}</h4>
  <button type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"></button>
</div>
<div class="modal-body">
   <!-- Omitted -->
</div>
<div class="modal-footer justify-content-center">
  <form method="POST" action="{% url "signup_for_lesson" %}">
    <!-- Omitted -->
  </form>
  <form method="POST" action="{% url "dropout_of_lesson" %}">
    {% csrf_token %}
      <button type="submit"
              name="dropout_of_lesson"
              id="signoutbutton"
              class="btn btn-outline-danger"
              data-needs-confirm="true"
              data-confirm-message="{% trans "Weet u zeker dat u zich wilt uitschrijven voor deze les?" %}"
              data-confirm-title="{% trans "Les uitschrijven" %}"
              data-option-one="{% trans "Ja" %}"
              data-option-two="{% trans "Nee" %}">
        Omitted
      </button>
  </form>
</div>
<script src="{% static 'js/confirm.js' %}"></script>

So I am not sure what is happening here.

Answer 1

The problem was that I wasn't properly removing the modal when I was done with it. I was hiding it, but this isn't enough. I need to completely remove the html with modal.remove()