title: Django + Bootstrap + nav-tabs are wrongly displayed
body: <p>I'm generating template in Django. The idea is to generate and populate Bootstrap nav-tabs according to entries in items parameters. Eg. If item1 belongs to room1, room1 should be displayed in tab and item 1 displayed there. If item2 also belongs to room1 it should be put to tab room1. Same story applies to room2, etc. 
  From Django POV seems that everything is ok, but I have troubles with rendering website.</p>
  
  <p>Here, below you can find my html page generated by Django.</p>
  
  <pre><code>{% extends "main.html" %}
  {% block items %}
  {% if items.count &gt; 0 %}
  
  &lt;div class="tabbable"&gt;
             &lt;ul class="nav nav-tabs"&gt;
  {% for roomlist in rooms %}
          {% if roomlist.id == 1 %}
            &lt;li class="active"&gt;&lt;a href="#{{ roomlist.room_name }}" data-toggle="tab"&gt;{{ roomlist.room_name }}&lt;/a&gt;&lt;/li&gt;
          {% else %}
          &lt;li&gt;&lt;a href="#{{ roomlist.room_name }}" data-toggle="tab"&gt;{{ roomlist.room_name }}&lt;/a&gt;&lt;/li&gt;
          {% endif %}
  {% endfor %}
             &lt;/ul&gt;
  
        &lt;div class="tab-content"&gt;
        {% for roomlist in rooms %}
          {% for item in items %}
            {% if item.room_id == roomlist.id %}
          &lt;div id="{{ roomlist.room_name }}" class="tab-pane active"&gt;{{ item.id }}&lt;/div&gt;
            {% endif %}
          {% endfor %}
        {% endfor %}
        &lt;/div&gt;
  &lt;/div&gt;
  
  
  {% else %}
  &lt;p&gt;No items&lt;/p&gt;
  {% endif %}
  {% endblock %}
  </code></pre>
  
  <p>From HTML POV it also looks ok:</p>
  
  <pre><code> &lt;div class="tabbable"&gt;
          &lt;ul class="nav nav-tabs"&gt;       
          &lt;li class="active"&gt;&lt;a href="#Kitchen" data-toggle="tab"&gt;Kitchen&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Sleep" data-toggle="tab"&gt;Sleep&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;div class="tab-content"&gt;
          &lt;div id="Kitchen" class="tab-pane active"&gt;2&lt;/div&gt;
          &lt;div id="Kitchen" class="tab-pane active"&gt;3&lt;/div&gt;   
          &lt;div id="Sleep" class="tab-pane active"&gt;4&lt;/div&gt;
          &lt;div id="Sleep" class="tab-pane active"&gt;6&lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>model:</p>
  
  <pre><code>from django.db import models
  from django.contrib.auth.models import User
  
  class RoomList(models.Model):
      room_name =models.CharField(max_length=150)
      user = models.ForeignKey(User)
      size = models.DecimalField(max_digits=5, decimal_places=2)
      comment = models.TextField()
  
      def __unicode__(self):
          return self.room_name
  
  class Item(models.Model):
      product = models.CharField(max_length=150)
      quantity = models.DecimalField(max_digits=8, decimal_places=3)
      price = models.DecimalField(max_digits=7, decimal_places=2)
      purchase_date = models.DateField(null=True, blank=True)
      warranty = models.DecimalField(max_digits=4, decimal_places=1)
      comment = models.TextField()
      room = models.ForeignKey(RoomList)
      user = models.ForeignKey(User)
  
      def __unicode__(self):
          return self.product
  </code></pre>
  
  <p>The problem is that, when I press refresh button, all items are located in tab "Kitchen", even those which are designed to be in "Sleep room". Later when I click "sleep room" tab, there is only one item - first (correct one, so intended to be in "sleep room"). Next when I click on "Kitchen" tab I will see first item, also correct one so intended to be in "Kitchen".
  Do you know why am I observing such phenomena? How to correct it?</p>