JQUERY UI Dialog Box Success Function Is Not Working...Executing But Not Working

I am trying to convert the ugly dialog confirmation box to the JQUERY UI.....The confirmation box works.....when I convert it over to the dialogue....it's working....in that I am getting a dialog box...but the success function itself is no longer working....It's executing...it shows my console log message...But it's not actually executing and I'm a bit lost as to why not...maybe a $this issue?

This is working....The original confirm( Are you Sure you want to )....

row.find('a.' + delCssSelector).click(function() {

  var result = confirm("Are you sure you want to Delete?");
  if (result) {
    var row = $(this).parents('.dynamic-form');
    var itemIdInput = row.find('input:hidden[id $= "-id"]');
    var itemId = itemIdInput.val();
    var deleteInput = `<input type="hidden" name="research_line_items_to_delete" value="${itemId}">`; // Update here....
    if ($(deleteInput).val()) {
      $('#research_line_items_to_delete').append(deleteInput); // Update here....
    }

    var row = $(this).parents('.' + options.formCssClass),
      del = row.find('input:hidden[id $= "-DELETE"]'),
      buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
      forms;
    if (del.length) {
      del.val('on');
      row.hide();
      forms = $('.' + options.formCssClass);
      totalForms.val(forms.length);
    } else {
      row.remove();
      forms = $('.' + options.formCssClass).not('.formset-custom-template');
      totalForms.val(forms.length);
    }
    for (var i = 0, formCount = forms.length; i < formCount; i++) {
      applyExtraClasses(forms.eq(i), i);
      if (!del.length) {
        forms.eq(i).find(childElementSelector).each(function() {
          updateElementIndex($(this), options.prefix, i);
        });
      }
    }

    if (!showDeleteLinks()) {
      $('a.' + delCssSelector).each(function() {
        $(this).hide();
      });
    }
    if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
    if (options.removed) options.removed(row);
    return false;
  }
});
};

I've got this "working" too...but it doesn't actually execute...I've made sure the logic is identical and it does in fact execute and show me the console.log message...but it's not actually executing...

row.find('a.' + delCssSelector).click(function() {

  var target = $(this).attr("href");
  var content = $(this).attr("title");
  var title = $(this).attr("alt");

  $("#dialog").dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: title,
    buttons: {
      'Yes': function() {
        $(this).dialog('close');
        callback(true);
      },
      'No': function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });

  function callback(value) {
    if (value) {
      var row = $(this).parents('.dynamic-form');
      var itemIdInput = row.find('input:hidden[id $= "-id"]');
      var itemId = itemIdInput.val();
      var deleteInput = `<input type="hidden" name="research_line_items_to_delete" value="${itemId}">`; // Update here....
      console.log("hereyo");
      if ($(deleteInput).val()) {
        $('#research_line_items_to_delete').append(deleteInput); // Update here....
      }
      console.log($(deleteInput).val());
      var row = $(this).parents('.' + options.formCssClass),
        del = row.find('input:hidden[id $= "-DELETE"]'),
        buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
        forms;
      if (del.length) {
        del.val('on');
        row.hide();
        forms = $('.' + options.formCssClass);
        totalForms.val(forms.length);
      } else {
        row.remove();
        forms = $('.' + options.formCssClass).not('.formset-custom-template');
        totalForms.val(forms.length);
      }
      for (var i = 0, formCount = forms.length; i < formCount; i++) {
        applyExtraClasses(forms.eq(i), i);
        if (!del.length) {
          forms.eq(i).find(childElementSelector).each(function() {
            updateElementIndex($(this), options.prefix, i);
          });
        }
      }

      if (!showDeleteLinks()) {
        $('a.' + delCssSelector).each(function() {
          $(this).hide();
        });
      }
      if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
      if (options.removed) options.removed(row);
      return false;
    }
  }
});
};

The associated HTML...

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
  </div>

Any thoughts on what is missing are greatly appreciated....

Consider the following lightweight example.

$(function() {
  function makeDialog(row, title, trueCall) {
    if (title == undefined) {
      title = "Delete Row " + row.data("id");
    }
    if (trueCall == undefined) {
      trueCall = function() {
        row.remove();
      };
    }

    var d = $("<div>").html("Please confirm that you want to delete this row.").dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        'Yes': function() {
          trueCall();
          d.dialog("close").dialog("destroy").remove();
        },
        'No': function() {
          d.dialog("close").dialog("destroy").remove();
        }
      }
    });
  }

  $(".delete-row").click(function(e) {
    e.preventDefault();
    makeDialog($(this).closest("tr"));
  });

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<table>
  <tr data-id="001">
    <td>Item 1</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
  <tr data-id="002">
    <td>Item 2</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
  <tr data-id="003">
    <td>Item 3</td>
    <td><a href="" class="delete-row">X</a></td>
  </tr>
</table>

This gives you a more specific reference.