I am facing a situation whereby only the first form in the forloop in the code below can submit data. The rest of the forms after the first forloop posts empty data. What could be the problem. I believe my views is good since it's able to process the data from the first form. I believe the problem should be in the code below only that i cannot figure where the issue is
When i hit submit button on the subsequent form i get the following in the shell
[12/Mar/2020 12:07:17] "POST /hotels/conference/cart/twiga-boardroom-3/ HTTP/1.1" 302 0
[12/Mar/2020 12:07:18] "GET /hotels/conference/panari-hotel HTTP/1.1" 200 34389
HTML CODE
{% for item in object.conferenceroom_set.all %}
<div class="room-item">
<div class="row gap-20">
<div class="col-12 col-sm-12 col-md-6">
<div class="row gap-20">
<div class="col-12 col-sm-4 col-md-4">
<div class="image">
<img src="{{ item.room_photo.url }}" alt="{{ item.object.name }}" />
</div>
<p></p>
{% if user.is_authenticated and item.user == user %}
<a href="#" class="btn btn-primary btn-xs">Edit</a>
<a href="#" class="btn btn-danger btn-xs">Delete</a>
{% endif %}
</div>
<div class="col-12 col-sm-12 col-md-8">
<div class="content">
<h5><a href="#">{{ item.room_Name }}</a></h5>
<p>{% for list in item.features_as_list %}
<span class="icon-font"><i class="fas fa-check-circle text-primary"></i> {{ list }} </br></span> {% endfor %}</p>
<p class="max-man">Max. Guests : <span class="badge badge-primary">{{ item.room_Capacity }}</span>
<p class="price"><span class="number text-secondary"><small>Ksh</small>{{ item.room_Price|intcomma }}</span> per guest</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6" >
<div class="row gap-20 justify-content-between">
<form method="POST" action="{% url 'conference-update-booking-2' item.slug %}" class='pull-right'>
<div id="airDatepickerRange-general" class="col-12 col-sm-8 col-md-8">
<div class="form-group">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-in</label>
<div class="form-icon-left">
<span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
<input type="text" name='checkin'id="dateStart-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
</div>
</div>
<div class="form-group">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-out</label>
<div class="form-icon-left">
<span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
<input type="text" name='checkout' id="dateEnd-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4">
<div class="form-group form-spin-group mb-5">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Attendants</label>
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='qty' class="form-control touch-spin-03 form-readonly-control" value="1" readonly/>
</div>
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Reserve</label>
<label class="line12 font13 spacing-05 mt-5 mb-10 block"></label>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#exampleModal2">
Book
</button>
<!-- Modal -->
<div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Book Accomodation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12" style="padding-left:0px">
<input type="checkbox" id="myCheck" onclick="myFunction()"> Do you also wish to book rooms for your guests' stay?
<p></p>
<p></p>
<p></p>
</div>
<div class="row" id="text" style="display:none">
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<select class="custom-select custom-select-md" name="single_hotel_room">
<option selected="" disabled>Select Single room</option>
{% for room in object.room_set.all %}
<option>{{ room.id}}-{{ room.room_Type}}@{{ room.room_Price}}</option>
{%endfor %}
</select>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='single-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
</div>
</div>
</div>
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<select class="custom-select custom-select-md" name="double_hotel_room">
<option selected="" disabled>Select Double room</option>
{% for room in object.room_set.all %}
<option>{{ room.id}}-{{ room.room_Type}}@{{ room.room_Price}}</option>
{%endfor %}
</select>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='double-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
</div>
</div>
</div>
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<input type="date" id="checkindate" name="checkindate" class="form-control form-readonly-control">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">CheckIn Date</label>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='nights' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Nights</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-sm btn-block">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% csrf_token %}
</form>
{% endfor %}```