Удаление элемента с помощью ajax в django

В настоящее время у меня возникла проблема с удалением элемента с помощью ajax в приложении Django. У меня есть несколько картинок, каждая из которых отображается в карточке bootstrap. В принципе, мой код вроде бы работает, но я не могу понять, почему, например, когда я отображаю картинки в карточке, в первой из списка кнопка Delete не работает, а когда у меня несколько картинок, кнопка delete работает, но удаляет первую картинку в списке, а не нужную. Возможно, у меня какая-то ошибка в получении идентификаторов, но пока я не смог найти, в чем проблема. Выкладываю некоторый код

views.py

def delete_uploaded_picture(request, pk):
picture = Picture.objects.get(id=pk)
if request.headers.get('x-requested-with') == 'XMLHttpRequest':
    picture.delete()
    return JsonResponse({})

js

const deleteForms = document.getElementsByClassName('delete_form')
deleteForms.forEach(deleteForm => deleteForm.addEventListener('click', (e)=>{
e.preventDefault();
let pk = deleteForm.getAttribute('data-pk')
const cardDiv = document.getElementById('card_div'+pk)
const clickedBtn = document.getElementById('clicked_btn'+pk)
$.ajax({
    type: 'POST', 
    url: $("#my-url-div").data('url'),
    data: {
        'csrfmiddlewaretoken': csrftoken,
        'pk': pk,
    }, 
    success: function(response){
        $('#card_div'+pk).hide();
        handleAlerts('success', 'Immagine Rimossa')
    }, 
    error: function(error){
        handleAlerts('danger', 'Ops qualcosa è andato storto!')
    }
})
}))

html

<div class="form-group mt-2">
                    <div class="row">
                    {% if question.picture_set.all %}
                        {% for pic in question.picture_set.all %}
                            <div class="col-lg-4 col-md-6" id="card_div{{pic.id}}">
                            <form action="" method="post" class="delete_form" data-pk="{{pic.id}}">
                                <div class="card picture_card" id="my-url-div" data-url="{% url 'main:delete_uploaded_picture' pk=pic.id %}">
                                    <img class="card-img-top img-fluid" src="{{ pic.picture.url }}" alt="">
                                    <div class="card-body">
                                        <button type="button" class="btn btn-danger btn-sm waves-effect waves-light delete_picture" id="clicked_btn{{pic.id}}">Elimina</button>
                                    </div>
                                </div>
                            </form>
                            </div>
                        {% endfor %}
                    {% endif %}
                    </div>
                </div>

Я проверил html и идентификаторы находятся прямо в карточке, так что это что-то другое.

$("tbody").on("click", ".btn-del", function () {
    //console.log("Delete Button Clicked");
    let id = $(this).attr("data-sid");
    let csr = $("input[name=csrfmiddlewaretoken").val();
    //console.log(id);
    mydata = { sid: id, csrfmiddlewaretoken: csr };
    mythis = this;
    $.ajax({
        url: "{% url 'delete' %}",
        method: "POST",
        data: mydata,
        success: function (data) {
            //console.log(data);
            if (data.status == 1) {
                $("#msg").text("Data Deleted Successfully");
                $("#msg").show();
                $(mythis).closest("tr").fadeOut();
            }
            if (data.status == 0) {
                $("#msg").text("Unable to Delete Data");
                $("#msg").show();
            }
        },
    });
});

let pk = deleteForm.getAttribute('data-pk');

let pk = e.currentTarget.getAttribute('data-pk');