theming – jQuery dialog is duplicated when set on a form that uses AJAX

Im using jQuery dialog on my form.

Drupal.behaviors.custom = {
attach: function (context, settings) {

    $('.form-container').once('form-cont', function () {
      Drupal.custom.modalLinks();
    });

    $('.my-form').once('my-form', function () {
       Drupal.custom.setModal(this);
    });

);

  Drupal.custom.modalLinks = function () {
    $('body').on('click', '.modal-link', function (e) {
      var id = $(this).data('modal-id');
      var className = $(this).data('modal-class');
      var $modal = $('.modal--' + id);

      $modal.dialog('widget').
        addClass('modal__wrap--' + className).
        addClass('modal__wrap');
      $modal.dialog('open');

      e.preventDefault();
    });
  };

Drupal.custom.setModal = function (container) {

    var $container = $(container);

    $container.find('.my-modal').
      dialog({
        autoOpen: false,
        draggable: false,
        width: 900,
        minHeight: 120,
        modal: true
    });

};

This is working fine when the page is first loaded. However my form has AJAX submission. When submitted the form then returns a new form which also has a dialog modal link.

If I submit the form then when it reloads with AJAX then the jQuery dialog modal is duplicated (not visible but I can see with dev tools). If I open the dialog now then 2 modals are opened.

From reading about duplicate dialogs (but not for Drupal specifically) it seems the solution is to use remove or destroy on the modal. However when I try this is always completely disables the modal, it doesn’t just remove the duplicates.
https://stackoverflow.com/questions/2864740/jquery-how-to-completely-remove-a-dialog-on-close