what could cause html and script to behave different across iterations of a for loop?
<p>I'm trying to build a side navigation bar where categories are listed and upon clicking a category a respective sub list of subcategories is shown right below the category. And if the category is clicked again, the sub list contracts.</p>

<p>So I'm running a loop across category objects. Inside this outer loop, I'm including a an inner loop to list subcategories and a script that hides the submenu and slidetoggles it only when a category is clicked. I'm using django template tags to dynamically assign class names for my html elements and also to refer to them in the script. So after all for loop iterations, there is a list of subcategory and a dedicated script for each category and they have unique class names so no chance of an overlap. So the weird part is, this works perfectly for most categories, but some of the categories and their submenu remain open and when clicked on the category the page reloads.</p>

<p>I don't get it, what could cause the exact same code (run in a for loop) to behave so differently?</p>

<p>This is my code:</p>

<pre><code>{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}
{% catindexlist as catindexlisted %}

{% block body %}&lt;div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 body-container leftsidenavigator" style="margin-top:15px;"&gt;
    &lt;div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 leftsidenavigator-inner" style="padding:0px;"&gt;
         &lt;h2&gt;&lt;center&gt;Categories&lt;/center&gt;&lt;/h2&gt;
             &lt;ul class="catindexlist catlistcat nav-collapse89"&gt;
                   {% for category in catindexlisted %}
                         &lt;li class="catindexlistitem category-name{{category.name}}{{category.name}}" style="font-weight:600;padding-right:20px;"&gt;&lt;a href=""&gt;{{category.name}}&lt;/a&gt;&lt;/li&gt;
                         &lt;ul style="padding:0px;" class="nav-collapse88"&gt;
                         {% for forum in category|forumindexlistbycat %}
                               &lt;li class="catlistforum{{category.name}}{{category.name}} forum-name" style="padding-right:10px;"&gt;&lt;a href="{{ forum.get_absolute_url }}"&gt;{{forum.name}}&lt;/a&gt;&lt;/li&gt;
                         {% endfor %}&lt;/ul&gt;&lt;script&gt;

                         $(function() {
                              $(".catlistforum{{category.name}}{{category.name}}").hide();
                                    $(".category-name{{category.name}}{{category.name}} a").click(function(e) {
                                     e.preventDefault();
                                     $(".catlistforum{{category.name}}{{category.name}}").slideToggle();
                                          if(!($(this).parent('li').siblings('div').children('ul').children('div').is(":visible"))){
                                              $(this).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle();
                                          }});
                                      })
                                &lt;/script&gt;
                           {% endfor %}
                           &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  {% endblock %}
     {% block theme_script %}&lt;script src="{% static "pinax/js/theme.js" %}"&gt;&lt;/script&gt;{% endblock %}
</code></pre>

<p>The most probable cause is the use of {{category.name}} for class names. </p>

<p>The code snippet doesn't show what values is accepted for category.name and my guess is it can be user input? 
See <a href="http://www.w3schools.com/tags/att_global_class.asp" rel="nofollow">naming rules</a> in section Attribute Values what is valid for class names.</p>

<p>It can be solved using template tag <a href="https://docs.djangoproject.com/es/1.10/ref/templates/builtins/#slugify" rel="nofollow">slugify</a> ({{category.name|slugify}}) but my recommendation is to try re-design the solution a bit.</p>

javascript jquery python django django-templates