Issue with creating new html/css elements inside jinja loops (Django) - html

Question

I am trying to create new html/css elements inside a jinja loop while within a form , where i am filling data that I brought from a django view. All the normal browser side stuff like pop-up on button clicks is good. But only the last button successfully makes a GET request whereas every button must do. This is my form here :
<form method="GET" action="{% url 'search_results' %}">
{% csrf_token %}
{% for name,quali,field,address,pro,c in data %}
<div class="ser_tile">
<img src={{pro}} id="user_dr" >
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#{{c}}">Visit Page</button>
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#b{{c}}">Book Appointment</button><br/><br/>
<span >
Name: {{name}}
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span><br/>
Degree: {{quali}}<br/>
Specialist: {{field}}<br/>
Hospital: Pradyumna Bal Memorial Hospital<br/>
Address: {{address}}
</span>
</div><br>
<div class="modal fade" id="{{c}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Specialist:</b></td>
<td>
{{field}}
</td>
</tr>
<tr>
<td><b> Ratting:</b></td>
<td>
3
</td>
</tr>
<tr>
<td><b>Available On:</b></td>
<td>
Monday(10:30AM : 5:00PM), Thursday(10:30AM : 1:00PM) , Saturday(10:30AM : 1:00PM)
</td>
</tr>
<tr>
<td><b>Minimum Chagre:</b></td>
<td>
Rs:500/-
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer qq{{c}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn_tile" data-toggle="modal" data-target="#b{{c}}" data-dismiss="modal">Book Appointment</button>
</div>
</div>
</div>
</div>
<script>
$(".btn_tile").click(function(event){
event.preventDefault();
});
</script>
<div class="modal fade" id="b{{c}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Date:</b></td>
<td>
<input name="date" class="td_in" type="date">
</td>
</tr>
<tr>
<td ><b> Time:</b></td>
<td>
<input name="time" class="td_in" type="time">
</td>
<td>
<b>Avilable times: </b>
</td>
<td>
1:00PM, 3:00PM
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</div>
</div>
</div>
</div>
<hr/>
{% endfor %}
</form>
This particular button (Confirm Booking) has to generate a GET request but it fails to. The array request.GET() returns None.
here is a screenshot of the popup

Answer 1

You could try inserting the button into a form as below....
<form method="get" action="<YOUR DESIRED ACTION>">
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>
hope it helps...