Bootstrap 4 Modal only runs once

Question

So for some reason, I created two modals. However, when I open either of them the first time, and then close the modal it will no longer open either of the two when I do t he action that worked the first time.

here is my javascript:

<script>
   $(document).ready(function()
   {
     $("#accountsTable").tablesorter();

     $('#newAccount').on('click', function() {
        $.ajax({
         async:true,
         url: '/crm/accounts/create_account_modal',
         success: function(res)
         {
            $('.createAccountModalBody');
            alert(res);
            $('#createAccountModal').modal({show:true});
            $('.createAccountModalBody').html(res);

         }});
    });

    $('tr').on('dblclick', function() {
       var AccountID = $(this).find('td').first().html();
       alert(AccountID);
       $('.editAccountModalBody').load('/crm/accounts/edit_account/1');

       $('#editAccountModal').modal('show');
    });

      $('#editAccountModal').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
                $(this).empty();
                $(this).removeAttr('style');
      });
        $('#createAccountModal').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
                $(this).empty();
                $(this).removeAttr('style');
      });

   });

   $('tr').on('dblclick', function() {
       var AccountID = $(this).find('td').first().html();
        alert(AccountID);
       $('.editAccountModalBody').load('/crm/accounts/create_account_modal');

       $('#editAccountModal').modal('show');
    });

</script>

Answer 1

with

$(this).empty();

you are removing all the html inside the modal, so you'll not have the html displayed on the next click

I suggest to append the data on a particular id / class name and just empty that id and not the whole modal

like:

$("#editAccountModalDATA").empty();