Django html page wont allow post with multiple items - html

Question

I have a html page that runs a for loop to populate students on a board. Here is screenshot and the code.
Issue: The issue is if i have more than one student in the class , no matter which button on the page i click it will not let me do a POST. If there is just a single kid in the class, the POST will work. So the post is failing and i don't know why. Thanks for the help in advance.
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy K8Points_ClassroomForm %}
{% load static %}
{% block content %}
<br>
<h2>{% load static %}
<img src="{% static 'forms/star.png' %}" alt="chain" height="62" width="62"> My Classroom</h2>
<br>
<br>
<form action="/points/k8_points_classroom" method="POST">
{% csrf_token %}
<!-- Start Date -->
<div class="container">
<div class="container">
<div class='row'>
<div class="col-4">
<p> Recording Data as User : {{user.username}} </p>
<p><b> Classroom : {{class_name}} </b></p>
</div>
</div>
<div class='row'>
<div class = "col-2">
{{form.date|as_crispy_field }}
</div>
<div class = "col-2">
{{form.week_of|as_crispy_field }}
</div>
<div class = "col-2">
{{form.day|as_crispy_field }}
</div>
</div>
</div>
<div class="jumbotron" align="middle">
<h1>My Students</h1>
<!-- Line Break -->
<hr style="border: 1px solid black;"/>
<!-- Line Break -->
<div class="row mb-3">
{% for i in students %}
<div class="col-md-4 themed-grid-col"><h2>{{i.student_name}}</h2>
<p align="left"> Today's Score: </p>
<h4>
<button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal"
data-target="#PointsBox1">Level Up
</button>
</h4>
<div id="PointsBox1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img src="{% static 'forms/star.png' %}" align="left" alt="chain" height="42"
width="42">
<h4 class="modal-title">Points Confirmation </h4>
<button type="button" class="close" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body">
<h6>
<div class="modal-body">Please add the selected points for the current
student.</div>
</h6>
<div class="form-row" align='left'>
<div class="col-7">
{{form.class_name|as_crispy_field }}
{{form.student_name|as_crispy_field }}
{{form.time_frame|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="col-3" align='left'>
{{form.behavior|as_crispy_field }}
{{form.academic|as_crispy_field }}
<button type="submit" class="btn btn-success"><i
class="fas fa-star"></i> Level Up
</button>
</div>
</div>
</div>
<div class="modal-foot"></div>
</div>
</div>
</div>
</div>
</form>
{% endfor %}
{% endblock %}

Answer 1

It's hard to know exactly what's going on because although you mention that "i click it will not let me do a POST" you don't mention exactly what error it jumps, or if it simply doesn't jump an error but doesn't save the information in the database.
However, I would start with two things:
There are errors in the html you designed. For example you open the form tag at the beginning of the code, but then you run a {% for i in students %} and inside that for you use </form> , which means that when you have several students, your code is going to have only one <form> tag but multiple </form> tags (I think that may be generating the error).
Try looking at the request.POST to see what the difference is when there is only one user with respect to when there are several. In the view that saves in the database the information, use print(request.POST), that can help you in the debugging.