Передача значения цикла for в bootstarp modal в django

Здесь я пытаюсь передать значение вне модального цикла с помощью ajax

Вот ссылка, по которой я перешел ссылка и пожалуйста, помогите мне, где я ошибаюсь

вот мой template.html

          {% for compliance in compliance %}
                {% complience_category compliance request.user as compliances %}
                {% for qualification in compliances %}
                .....
                .....
                <td>
                    <button data-toggle="modal" data-target="#modal-default" data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
                                edit
                           </button>
                </td>
                ....
                .....
                {% endfor %}

          {% endfor %}

          {% csrf_token %}
                <div class="modal hid fade" id="modal-default">
                    <div class="modal-dialog">
                    <form class="form-horizontal" method="POST" enctype="multipart/form-data" action="{% url 'update_qualifications' qualification.id %}" "> 
                        {% csrf_token %}
                            {% if qualification %}
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3>Update Compliance</h3>
                            </div>
                            <div class="modal-body">
                                <div class="control-group">
                                    <label class="control-label" for="inputdate_{{qualification.id}}">Expiry Date</label>
                                    <div class="controls">
                                            <input type="date" id="inputdate_{{qualification.id}}" name="expiry_date" value="{{qualification.expiry_date|date:'Y-m-d'}}">
                                       
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                
                                <button class="btn" data-dismiss="modal">Close</button>
                                <button class="btn btn-primary" type="submit">Save</button>
                            </div>
                            {% endif %}

                    </form>
                    </div>
                </div>

вот мой AJAX

<script>
    
    $(document).on('click','.edit-qualification',function(){
        var id = $(this).data('id');
        console.log(id)
    
        $.ajax({
            url:'',
            type:'POST',
            data:{
                'id':id,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
            },
            
            success:function(data){
                $('#modal-default .modal-dialog').html($('#modal-default .modal-dialog',data));
                $('#modal-default').modal('show');
                
            },
            error:function(){
                console.log('error')
            },
        });
    });
    </script>

здесь при нажатии на кнопку редактирования определенного элемента нужно обновить только этот элемент

Пожалуйста, помогите мне решить эту проблему, где я ошибаюсь

Вернуться на верх