passing a for loop value to bootstarp modal in django

Question

Here i am trying to pass the value outside for loop modal using ajax

Here is the reference link which i followed reference link and please help me where i am wrong

here is my 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>

here is my 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>

Here is my views.py

@login_required
def update_qualifications(request, qualifiaction_id):
    
    client = request.user.client
    next_url = request.POST.get('next', '/')
    date = request.POST.get('expiry_date') or None
    record_date = request.POST.get('record_date') or None
    name = request.POST.get('id_name')
    compilance = request.POST.get('compliance')
    document = request.FILES.get('document')
    qualification = get_object_or_404(ClientUserQualification, pk=qualifiaction_id)
    if document:
        qualification.document = document

    done = request.POST.get('done', False)

    qualification.expiry_date = date
    qualification.record_date = record_date
    if request.user.is_admin:
        qualification.validated = True
    else:
        qualification.validated = False

    qualification.done = done

    if name:
        qualification.name = name

    qualification.qualification_id = compilance
    
    messages.success(request, 'Compliance was successfully updated.')
    if request.user.is_admin:
        qualification.save()
        return redirect(next_url)

    qualification.validated = False
    qualification.save()
    return redirect(reverse('worker_compliance_list'))

here when clicking edit of particular item it need to update only for that item

Please help me to solve this problem where i am wrong