Modal Fails To Pop Up

Question

Am working on a todo list app in flask. So i have created a view to edit task and in my html, am using a specific button which i want to display a modal for updating the given task. But to my surprise the modal cant show up even after trouble shooting and confirming that everything is right. Below are my source codes

<!-- Edit Task Modal -->
<div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTaskModalLabel">Edit Task</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- <form method="post" action="/edit_task" id="editTaskForm"> --> -->
                    
                    <form method="post" action="/edit_task/{{ task_for_modal.id }}">
                        {{ form.hidden_tag() }}
                        <div class="mb-3">
                            <label for="taskText" class="form-label">Task</label>
                            <input type="text" class="form-control" id="taskText" name="task" value="{{ task_for_modal.task }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" rows="3" name="description">{{ task_for_modal.description }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="dueDate" class="form-label">Due Date</label>
                            <input type="date" class="form-control" id="dueDate" name="due_date" value="{{ task_for_modal.due_date|default('') }}">
                        </div>
                        <div class="mb-3">
                            <label for="dueTime" class="form-label">Due Time</label>
                            <input type="time" class="form-control" id="dueTime" name="due_time" value="{{ task_for_modal.due_time|default('') }}">
                    </div>
                        <div class="mb-3">
                            <label for="priority" class="form-label">Priority</label>
                            <select class="form-select" id="priority" name="category">
                                <option value="low" {% if task_for_modal.category == 'low' %}selected{% endif %}>Low</option>
                                <option value="medium" {% if task_for_modal.category == 'medium' %}selected{% endif %}>Medium</option>
                                <option value="high" {% if task_for_modal.category == 'high' %}selected{% endif %}>High</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Task</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

Below is the button to trigger the model

<div class="ms-3">
                                            <a href="#" class="text-info edit-task-button" data-mdb-toggle="modal" data-mdb-target="#editTaskModal" data-task-id="{{ task.id }}">
                                                <i class="fas fa-pencil-alt"></i> Edit
                                            </a>
                                        </div>

below is the view for editing a task

@app.route("/edit_task/<int:task_id>", methods=['GET', 'POST'])
@login_required
def edit_task(task_id):
    task = Task.query.get_or_404(task_id)

    form = TaskForm()
    if form.validate_on_submit():
        task.task = form.task.data
        task.description = form.description.data
        task.due_date = form.due_date.data
        task.due_time = form.due_time.data
        task.category = form.category.data

        db.session.commit()

        flash('Task has been updated successfully!', 'success')
        return redirect(url_for('dashboard'))

    # Pre-fill the form fields with the existing task data
    form.task.data = task.task
    form.description.data = task.description
    form.due_date.data = task.due_date
    form.due_time.data = task.due_time
    form.category.data = task.category

    # return render_template('dashboard.html', form=form, tasks=get_user_tasks(), current_user=current_user)
    return render_template('dashboard.html', task=task, form=form, current_user=current_user)

Below is the javascript to trigger the event listeners

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.1/mdb.min.js"></script>
    <script>
        $(document).ready(function() {
            $('[data-mdb-toggle="tooltip"]').tooltip();

            $('.edit-task-button').click(function() {
        var taskId = $(this).data('task-id');
        var task = getTaskById(taskId); // Implement a function to fetch task details by ID
        fillEditTaskForm(task);
    });

        // Handle click event for delete task button
        $('.delete-task-button').click(function() {
            var taskId = $(this).data('task-id');
            $('#confirmDeleteTask').attr('href', '/delete_task/' + taskId); // Update link
        });

        $('#editTaskModal').modal('show');


    // Function to fetch task details by ID (replace with actual implementation)
    function getTaskById(taskId) {
        // Replace with actual code to fetch task details from your data source (e.g., database)
        return {
            id: taskId,
            task: "Task Name",
            description: "Task Description",
            due_date: "2023-08-15",
            due_time: "12:00",
            category: "high"
        };
    }

    function fillEditTaskForm(task) {
        $('#taskText').val(task.task);
        $('#description').val(task.description);
        $('#dueDate').val(task.due_date);
        $('#dueTime').val(task.due_time);
        $('#priority').val(task.category);
        $('#editTaskModal').modal('show');
    }
        });
    </script>

am having other buttons which display modals, i have tried changing the modal ids and realized that those modals are working fine with the button and i think the problem is strictly on the modal