title: toggle css to div based on an custom attribute
body: <p>I have multiple divs in a page all using the same css</p>
  
  <pre><code>&lt;div class="datumTijd"&gt;Speelronde 1&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  
  &lt;div class="thuis wedstrijd" wedstrijdId="1" toto="1" ronde="1"&gt;PEC Zwolle&lt;/div&gt;
  &lt;div class="vs wedstrijd" wedstrijdId="1" toto="2" ronde="1"&gt;X&lt;/div&gt;
  &lt;div class="uit wedstrijd" wedstrijdId="1" toto="3" ronde="1"&gt;FC Utrecht&lt;/div&gt;
  &lt;div class="vsScore"&gt;0&lt;/div&gt;
  
  &lt;div class="thuis wedstrijd" wedstrijdId="2" toto="1" ronde="1"&gt;sc Heerenveen&lt;/div&gt;
  &lt;div class="vs wedstrijd" wedstrijdId="2" toto="2" ronde="1"&gt;X&lt;/div&gt;
  &lt;div class="uit wedstrijd" wedstrijdId="2" toto="3" ronde="1"&gt;FC Dordrecht&lt;/div&gt;
  &lt;div class="vsScore"&gt;0&lt;/div&gt;
  </code></pre>
  
  <p>when i click on a div with the 'wedstrijd' class i switch to a different class</p>
  
  <pre><code>$("#teamStats .wedstrijd").click(function(  ) {
  
  console.log($(this).attr('wedstrijdId'));
  console.log($(this).attr('toto'));
  
  $( this ).toggleClass( "wedstrijdSelected" );
  
  });
  </code></pre>
  
  <p>but now i have a problem. The selected div should be using the 'wedstrijdSelected' class. So for example, i click on PEC Zwolle it works. This div is now using the other class. But when i click on FC Utrecht both are using the 'wedstrijdSelected'. How can i based on the 'wedstrijdId' attribute only use the 'wedstrijdSelected' once.</p>