[FIXED] Updating html for specific model instance Django

Issue

I have a Django template that generates a HTML 'card-like' element for each model instance. Each instance (ie 'post') have a button, when on click, I would like to update a value within that SAME instance.

I have been able to do this within the database, but am struggling with updating the HTML to match. Currently, my solution is updating ALL instances/posts. However, I only want to update it on the instance that had the button click.

Does this make sense? Let me know if it doesn't. I will attach my code below along with an image demonstration. I did try passing through the event ID and making sure they align up for both the button and paragraph tag, but this seemed to not work.

JS:

function signUp(user, event, btn, eventID) {
    var csrftoken = Cookies.get("csrftoken");
    var user_id = user
    var event_id = event

    attendance_count = document.querySelectorAll("#attendance");

    if (btn.classList.contains("event-btn")){
        request_info = "register";
    }
    else if (btn.classList.contains("signUpBtnActive")){
        request_info = "unregister";
    }

    $.ajax({
        type: "POST",
        url: "/event/update-attendance/",
        data: {
            user_id: user_id,
            event_id: event_id,
            request_info: request_info,
            "csrfmiddlewaretoken": csrftoken
        },
    }).done(function(response){
        if (attendance_count){
            attendance_count.forEach(element => {
                event_id = element.getAttribute("event-instance");
                if (event_id == eventID){
                    element.innerHTML = response;
                }
            })
        }
    });

}

My view:

def updateAttendanceView(request):
    if request.method == "POST":
        user_id = request.POST.get("user_id");
        event_id = request.POST.get("event_id");
        request_info = request.POST.get("request_info");
    
        user = User.objects.all().filter(id=user_id)
        event = EventPost.objects.get(id=event_id)

        if request_info == "register":
            #create record in model
            if not EventAttendees.objects.filter(attendee__in=user, event=event).exists():
                event_attendee_record = 
EventAttendees.objects.create_event_attendee(user, event)
                event_attendee_record.save()
                event.attendance += 1
                event.save()

        elif request_info == "unregister":
            #remove record from model
            record = EventAttendees.objects.filter(attendee__in=user, event=event)
            if record:
                record.delete()
                event.attendance -= 1
                event.save()
                print("200 - Request Success - Record removed successfully")
            else:
                print("500 - Request Failed - Record not found")

    html = '<p class="m-0 attendance-font">'+str(event.attendance)+'</p>'
    return HttpResponse(html)

My html template (I have removed the irrelevant stuff)

{% for post in event_posts %}
    <div class="card mb-3 event-card border-0">
        <div class="card-body">
             <div class="container p-2">
                   <div class="row">                            
                        <div class="col-auto pe-3">
                            <div class="row"> 
                                <div class="col p-2">
                                    <div class="d-flex flex-row flex-nowrap align-items-center">
                                        <i class="bi-people pe-1 fs-5"></i>
                                        <p class="m-0 attendance-font" id="attendance" event-instance={{event.id}}>{{post.attendance}}</p>
                                     </div>
                                 </div>
                    
                            <div class="row">
                                <div class="col-auto d-flex">
                                    <button type="button" class="btn shadow-none rounded-pill pt-1 pb-1 event-btn" onclick="signUp('{{user.id}}', '{{post.id}}', this, '{{event_id}}')">Sign Up</button>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
         </div>
    </div>
{% endfor %}

See the below HTML:

When I click the sign up button on one post (event 6 in this case), the count updates visually for all cards. This is only a frontend issue.

Solution

Have a look in your HTML - especially these two lines.

event-instance={{event.id}}

onclick="signUp('{{user.id}}', '{{post.id}}', this, '{{event_id}}')"

It's unclear from what you've provided how event.id, or event_id are determined. I suspect they aren't, and they are always matching because they are always blank.

If you are cycling through post items and event is a foreign key within post, then you may want to use post.event.id or post.event_id in each case above.

Answered By - SamSparx