title: Dynamically check for SELECT duplicate value
body: <p>the goal I'm aiming for is to check all the SELECT element for duplicated values (can't select the same value in 2 SELECTs)<br>
  I've done lots of searching but all of it 2 SELECTs not fixable for more  </p>
  
  <p>the logic I tried:   </p>
  
  <blockquote>
    <p>check function(){<br>
       declare values array, errorElement array<br>
       foreach(select element){ 
       if the selected value exist in the value array(duplicate), add the element to the error element array<br>
       else add the value to the value array<br>
       }<br>
       if no error elements (no duplicated values), remove the error class from all selects<br>
       else foreach(select elemnt){<br>
       if the select exists in the error element array, set error class<br>
       else remove error class<br>
       }<br>
    }  </p>
    
    <p>on any select change, call  check function  </p>
  </blockquote>
  
  <p>and here the <a href="http://jsfiddle.net/6YAns/" rel="nofollow noreferrer">demo</a>  </p>
  
  <pre><code>function checkSelects() 
  { 
      var errorElements = []; var values = [];
  
      $("select").each(function () {
          if ($.inArray($(this).val(), values) !== -1) {
              errorElements.push($(this).attr('id'));
          } else {
              values.push($(this).val());
          }
      });
      if (errorElements.length === 0) {
          $("select").each(function () {
              $(this).removeClass('error');
          });
      } else {
          $("select").each(function () {
              if ($.inArray($(this).attr('id'), errorElements) !== -1) {
                  $(this).addClass('error');
              } else {
                  $(this).removeClass('error');
              }
          });
      }
  }
  
  $(function () {
       $("select").change(function () {
          checkSelects();
       }); 
  });
  </code></pre>
  
  <p>as for functionality it works perfect, setting the error class for one side of the duplicate conflict. but I'd like to make it even more clear and set the error class for both sides  </p>
  
  <p>is that going over-board? any pointer how to achieve that?<br>
  here's a screen-cap of it<br>
  <img src="https://i.stack.imgur.com/duMjm.jpg" alt="enter image description here"></p>
  
  <p>selecting text1 in 2 SELECTs only sets the error class for the later element.<br>
  I'd like for both text1s to be shown in red</p>