title: jQuery add and remove class for parent element (multiple times in one page)
body: <p>I'm radio buttons on my webpage as a filter and the radio buttons are hidden, I just showing the labels.
  The code looks like this:</p>
  
  <pre><code>&lt;div class="filter"&gt;
  &lt;div class="field_row label-selected"&gt;
      &lt;input id="field_6_95_0" class="filteDataForSerialize" type="radio" value="0" name="f[g][6]"&gt;
      &lt;label for="field_6_95_0"&gt;Option 1&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="field_row"&gt;
      &lt;input id="field_6_95_1" class="filteDataForSerialize" type="radio" value="1" name="f[g][6]"&gt;
      &lt;label for="field_6_95_1"&gt;Option 2&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="field_row"&gt;
      &lt;input id="field_6_95_2" class="filteDataForSerialize" type="radio" value="2" name="f[g][6]"&gt;
      &lt;label for="field_6_95_2"&gt;Option 3&lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I'm using the following script:</p>
  
  <pre><code>jQuery('.filter div:first').addClass('label-selected');
          jQuery('.filter label').on('click', function() {
              var parent_div = jQuery(this).parent().addClass('label-selected');
              jQuery('.filter').find('div').not(parent_div).removeClass('label-selected');
          });
  </code></pre>
  
  <p>So by default the first element got the label-selected class and when I'm choosing any other that will got the class and the script delete from the other. It works until I'm using the same html snippet in the same page more times. In this case the jQuery remove every label-selected class from the page.</p>
  
  <p>Css doesn't affect it I think, but:</p>
  
  <pre><code>.field_row &gt; input{display:none};
  .field_row &gt; label{display:block;cursor:pointer;padding: 5px 10px;}
  .label-selected &gt; label{bacground-color:#000;color:#fff;}
  </code></pre>