JavaScriptで確認ダイアログを追加したところ削除が機能しなくて困っています

Question

前提・実現したいこと

ユーザーの登録・一覧表示・編集・削除が行えるものを作成中です。
上記一通り機能としては作動していたのですが
削除時に確認のダイアログを出すことになり最初confirmを使っていたのですが
ダイアログ内の確認メッセージを『OK・キャンセル』ではなく『はい・いいえ』にするため
jQueryを用いてモーダル処理を使用しました。
削除ボタンを押す→『はい』を押すと登録データが削除される
という動きを考えています。
削除ボタンを押すとダイアログは出るのですが
ここで問題が２つあります。

どなたかよろしくお願いいたします。

発生している問題・エラーメッセージ

①『いいえ』を押してもダイアログがすぐに消えず何回も押すと消える
https://gyazo.com/d308285c9abddb1d45440f4d8eb4c551
②『はい』を押しても変化がない
https://gyazo.com/805be5523fda199617767e8de6aa60e3

該当のソースコード

from django.urls import reverse
from django.http import HttpResponse, HttpResponseRedirect
from django.views.decorators.http import require_http_methods
from django.shortcuts import render,get_object_or_404, redirect
from django.template import loader
from .form import EmployeeForm

from .models import User

# 一覧表示へのリクエストに対する処理
def show(request):
    # 登録されている担当者情報全てを取得する
    registration_list = User.objects.all().order_by('id')
    # 取得した情報をディクショナリに収める
    registration_dict = {'registrations': registration_list}
    # ディクショナリを渡して一覧表示画面で表示する
    return render(request, 'employee/show.html',context=registration_dict)

# 削除へのリクエストに対する処理
def delete(request, id):
    employee = get_object_or_404(User, pk=id)
    employee.delete()
    return redirect('employee:show')

from django.urls import path

from . import views

app_name = 'employee'
urlpatterns = [
    path('', views.index, name='index'),
    path('show/', views.show, name='show'),
    path('update/<id>/', views.update, name='update'),
    path('registration/', views.registration, name='registration'),
    path('delete/<id>/', views.delete, name='delete'),
]

<!-- CSSの設定 -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'employee/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'employee/show.css' %}">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<div class = top>
    <h1>一覧</h1>
    <!-- ページを遷移するボタンの表示 -->
    <div class = move-btn>
        <div><a href="/employee/" class = btn>メニュー</a></div>
    </div>

    <!-- 登録されているユーザー情報をテーブルで表示 -->
    <div class = show-table>
        <table border="1">
            <tr>
                <th class="th1">ID</th>
                <th class="th2">担当者名</th>
                <th class="th3">性別</th>
                <th class="th4">年齢</th>
                <th class="th5">部署</th>
            </tr>
            <!-- 繰り返し処理でUserモデルに登録されているデータを全て表示する -->
            {% for value in registrations %}
            <tr>
                <td class="td1">{{ value.id }}</td>
                <td class="td2">{{ value.employee_name }}</td>
                <!-- Userモデルに登録されたsexのカラムの値によって表示する文字を変える -->
                <td class="td3">{% if value.sex == True %}男{% endif %}
                    {% if value.sex == False %}女{% endif %}</td>
                <td class="td4">{{ value.age }}</td>
                <!-- Userモデルに登録されたdepartmentのカラムの値によって表示する文字を変える -->
                <td class="td5">{% if value.department == 1 %}管理{% endif %}
                    {% if value.department == 2 %}システム開発{% endif %}
                    {% if value.department == 3 %}営業{% endif %}</td>
                    <!-- 更新と削除のボタン表示 -->
                    <td class="edit">
                        <button><a href="{% url 'employee:update' id=value.id %}"><img src="{% static "employee/update-btn.png" %}"></a></button>
                        
                        <button id='del_btn' class='del_btn' onclick="confirm();" type="submit"><img src="{% static "employee/delete-btn.png" %}"></button>
                        
                    </td>
                </td>
            </tr>
            <form name="delete_form" id="delete_form" method="post" action="{% url 'employee:delete' id=value.id %}">
                {% csrf_token %}
                <div id="del_dialog" style="display:none;">
                    <p>この行を削除しますか？</p> 
                </div>
            </form>
            {% endfor %}
        </table>

        
        <script type="text/javascript">
            function confirm() {
                $('.del_dialog').hide();
                $('.del_btn').on('click',function(e){
                    e.preventDefault();
                    $('#del_dialog').dialog({
                        title:"登録者情報の削除依頼",
                        modal:true,
                        buttons:{
                            "はい":function(){
                                $('.del_btn').closest('form').submit();
                            },
                            "いいえ":function(){
                                $(this).dialog("close");
                            }
                        },
                    });
                });
            };
        </script>
    </div>
</div>

試したこと

①に関してはformタグの記述場所が問題なのではと考えていますが
for文外に記述するとidが受取れなくて一覧表示画面が表示されません。
https://gyazo.com/005a6559e815e9e5bdbb7be751c6fe52

補足情報（FW/ツールのバージョンなど）

Windows10
Python3.9.4
Django 3.2.3
VitualStudioCode
他にも不足なとこあれば教えてください

Answer 1

$('.del_btn').on('click',function(){

クリックイベントを止めてないからでは？

 $('.del_btn').on('click',function(e){
  e.preventDefault();

#sample

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script>
$(function(){
  $('#del_dialog').hide();
  $('#del_btn').on('click',function(e){
    e.preventDefault();
    $('#del_dialog').dialog({
    modal:true,
    buttons:{
      "はい":function(){
        $('#del_btn').closest('form').submit();
      },
      "いいえ":function(){
        $(this).dialog("close");
      }
    }
    });
  });
});
</script>
<form>
<input type="hidden" name="del" value="1">
<button type="submit" id="del_btn">削除</button>
</form>
<div id="del_dialog">
<p>この行を削除しますか？</p> 
</div>

Comments

[shunxile]

>>yambejpさん
回答ありがとうございます。修正しましたが『はい』・『いいえ』共に変化なしです

[yambejp]

sample追記しておきました
コピペして動作確認してください

[shunxile]

>>yambejpさん
ありがとうございます！
sampleを参考にコードを修正したところ期待していた動作が得られました。
本当にありがとうございました