title: Django template won't let my datetime field pop up or open
body: <p>I've been experiencing a weird error when using django for loop template, whenever I use my "{% for groups in groups %}" for loop, my datetime field won't open, however when I try to use other context for my loop, it just works. I also just simply copy pasted this modal from my other html page since it has the same function. Already checked if there are any conflicts with id and other loops. Also tried inspecting element on the modal's button, and it shows the correct group id. I have been using the same loop for other functions in this html page and it seems to be working fine as well. Any idea on how to debug this issue?</p>
  
  <p><strong>admin.html</strong>   </p>
  
  <pre><code>{% for groups in groups %}
  &lt;!--start ALLOCATE MODAL --&gt;
  &lt;div id="allocateModal-{{groups.id}}" class="modal fade" role="dialog" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="form-horizontal form-label-left"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;
            &lt;/button&gt;
            &lt;h3 class="modal-title" id="myModalLabel"&gt;Allocate Device&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;h2&gt;Device List&lt;/h2&gt;
            &lt;table class="table-width table table-striped jambo_table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th style="width: 10%"&gt;&lt;/th&gt;
                  &lt;th style="width: 30%"&gt;Device&lt;/th&gt;
                  &lt;th&gt;Quantity&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td class="a-center "&gt;
                    &lt;input type="checkbox" id="routerBox" onchange="enableRQty(this)"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Router&lt;/td&gt;
                  &lt;td&gt;
                    &lt;div class="col-md-4"&gt;
                      &lt;input type="text" id="routerQty" class="form-control" data-inputmask="'mask': '9'" placeholder="0" disabled&gt;
                    &lt;/div&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td class="a-center "&gt;
                    &lt;input type="checkbox" id="switchBox" value="sw" onchange="enableSWQty(this)"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Switch&lt;/td&gt;
                  &lt;td&gt;
                    &lt;div class="col-md-4"&gt;
                      &lt;input type="text" id="switchQty" placeholder="0" disabled class="form-control" data-inputmask="'mask': '9'"&gt;
                    &lt;/div&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
  
                &lt;tr&gt;
                  &lt;td class="a-center "&gt;
                    &lt;input type="checkbox" id="terminalBox" value="host" onclick="enableTQty(this)"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;Terminal&lt;/td&gt;
                  &lt;td&gt;
                    &lt;div class="col-md-4"&gt;
                      &lt;input type="text" id="terminalQty" placeholder="0" disabled class="form-control" data-inputmask="'mask': '9'"&gt;
                    &lt;/div&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="col-md-6 col-sm-6 col-xs-12" style="padding-right: 0"&gt;
                &lt;label class="control-label col-md-3" style="width: 17%" for="datetimepicker6"&gt;Date&lt;/label&gt;
                &lt;div class='input-group date' id='datetimepicker6'&gt;
                  &lt;span class="input-group-addon"&gt;
                    &lt;span class="fa fa-calendar-o"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;input type='text' class="form-control" /&gt;
                  &lt;!-- &lt;span class="input-group-addon"&gt;to&lt;/span&gt; --&gt;
                &lt;/div&gt;
              &lt;/div&gt;   
  
              &lt;div class="col-md-6 col-sm-6 col-xs-12" style="padding-left: 0"&gt;
                &lt;label class="control-label col-md-3" style="width: 12%" for="datetimepicker7"&gt;to&lt;/label&gt;
                &lt;div class='input-group date' id='datetimepicker7'&gt;
                  &lt;input type='text' class="form-control" /&gt;
                  &lt;span class="input-group-addon"&gt;
                    &lt;span class="fa fa-calendar-o"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;              
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Allocate&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end ALLOCATE MODAL --&gt;
  {% endfor %}
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def adminPage(request):
  currentUser = request.user
  
  if currentUser.profile.usertype != 'admin':
      return HttpResponseRedirect("/user/")
  
  signupForm = SignUpForm()
  newgroupForm = CreateGroupForm()
  
  users = User.objects.all()  
  groups = Group.objects.all()
  grouptodevice = GroupToDevice.objects.all()
  devices = Device.objects.all()
  
  context = {
  'groups':groups,
  'users':users,
  'current_user': currentUser,
  'newgroupForm': newgroupForm,
  'signupForm' : signupForm,
  'grouptodevice' : grouptodevice,
  'devices':devices,
  }
  return render(request, 'admin.html', context)
  </code></pre>