title: How to select one element instead of all elements using 'clicked' in a Django for loop
body: <p>In my Django project I am trying to create a feature so that when someone clicks the cog element on my folder, it adds a class to only the one folder element I have clicked.</p>
  
  <p>My issue is that when I click the cog, it apply's the class to all of the other folders, and not just the one I want. I understand why it is doing this, but not sure how to fix it.</p>
  
  <p>When I click the cog</p>
  
  <p><a href="https://i.stack.imgur.com/ZC9px.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZC9px.png" alt="enter image description here"></a></p>
  
  <p>It applys the css to all elements and not just the one I clicked with the cog.</p>
  
  <p><a href="https://i.stack.imgur.com/GoOva.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GoOva.png" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>        {% for video in videos %}
              {% if video.active %}
                  &lt;div class="folder"&gt;
                      &lt;div class="folder-settings-tool" onclick="folderSettings(this)"&gt;
                          &lt;!-- CHANGE COLOUR OF THE SETTINGS COG TO WHITE --&gt;
                          &lt;img src="{% static 'public/image/icons/settings-work-tool.svg' %}"&gt;
                      &lt;/div&gt;
                      &lt;div class="folder-settings"&gt;
                          &lt;div class="title-change"&gt;
                              &lt;p class="title-rename"&gt;RENAME&lt;/p&gt;&lt;input type="text" name="title"&gt;
                          &lt;/div&gt;
                          &lt;div class="archive"&gt;
                              &lt;p class="archive-text"&gt;
                                  ARCHIVE
                              &lt;/p&gt;
                              &lt;label class="switch"&gt;
                                  &lt;input type="checkbox"&gt;
                                  &lt;span class="slider round"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="make-final"&gt;
                              &lt;p class="archive-text"&gt;
                                  MAKE FINAL
                              &lt;/p&gt;
                              &lt;label class="switch"&gt;
                                  &lt;input type="checkbox"&gt;
                                  &lt;span class="slider round"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="downloadable"&gt;
                              &lt;p class="archive-text"&gt;
                                  DOWNLOADABLE
                              &lt;/p&gt;
                              &lt;label class="switch"&gt;
                                  &lt;input type="checkbox"&gt;
                                  &lt;span class="slider round"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;a href="{% url 'public:file_detail' model='video' pk=video.pk %}"&gt;
                          &lt;div class="folder-text"&gt;
                              &lt;p&gt;VIDEO&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="image"&gt;
                              &lt;img src="{% static 'public/image/icons/folders.svg' %}"&gt;
                          &lt;/div&gt;
                          &lt;div class="folder-info"&gt;
                              &lt;div class="folder-title"&gt;   
                                  {{ video.title }}
                              &lt;/div&gt;
                              &lt;div class="folder-date"&gt;
                                  &lt;p&gt;&lt;span class="folder-created"&gt;Created&lt;/span&gt; {{ video.created }}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              {% endif %}
          {% endfor %}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>    function folderSettings(element) {
          if($(element).data('clicked')) {
              $(".folder").removeClass("folder-hidden");
              $(element).data('clicked', false);
          } else {
              $(".folder").addClass("folder-hidden");
              $(element).data('clicked', true);
          }
      };
  </code></pre>