modifying a multiple selects validation with jqury
<p>What I've got so far:
<a href="http://jsfiddle.net/heera/m4tyC/1/" rel="nofollow">http://jsfiddle.net/heera/m4tyC/1/</a></p>

<p>What I want is:</p>

<ol>
<li>add class "invalid" for the <code>&lt;select&gt;</code> if it was not selected in it's row</li>
<li>remove this class if the 3 selects in the row are selected </li>
<li>if all <code>&lt;select&gt;</code>s in one row are selected then submit the form</li>
<li>if only one <code>&lt;select&gt;</code> is selected then add the "invalid" class to the other 2 selects in the same row</li>
</ol>

<p>This is the HTML and the js is included in the fiddle link above :</p>

<pre><code> &lt;form id="productOptions" name="product-options"&gt;
  &lt;div class="selects s1"&gt;
    &lt;select name="selectss1" id="size1" class="product-select-options-size"&gt;
      &lt;option&gt;-Size&lt;/option&gt;
      &lt;option&gt;Small&lt;/option&gt;
      &lt;option&gt;Medium&lt;/option&gt;
      &lt;option&gt;Large&lt;/option&gt;
      &lt;option&gt;X-large&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsc1" id="color1" class="product-select-options-color"&gt;
      &lt;option&gt;-Color&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Pink&lt;/option&gt;
      &lt;option&gt;White&lt;/option&gt;
      &lt;option&gt;Yellow&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsq1" id="qty1" class="product-select-options-qty"&gt;
      &lt;option&gt;-QTY&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="selects s2"&gt;
    &lt;select name="selectss2" id="size2" class="product-select-options-size"&gt;
      &lt;option&gt;-Size&lt;/option&gt;
      &lt;option&gt;Small&lt;/option&gt;
      &lt;option&gt;Medium&lt;/option&gt;
      &lt;option&gt;Large&lt;/option&gt;
      &lt;option&gt;X-large&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsc2" id="color2" class="product-select-options-color"&gt;
      &lt;option&gt;-Color&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Pink&lt;/option&gt;
      &lt;option&gt;White&lt;/option&gt;
      &lt;option&gt;Yellow&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsq2" id="qty2" class="product-select-options-qty"&gt;
      &lt;option&gt;-QTY&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="selects s3"&gt;
    &lt;select name="selectss3" id="size3" class="product-select-options-size"&gt;
      &lt;option&gt;-Size&lt;/option&gt;
      &lt;option&gt;Small&lt;/option&gt;
      &lt;option&gt;Medium&lt;/option&gt;
      &lt;option&gt;Large&lt;/option&gt;
      &lt;option&gt;X-large&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsc3" id="color3" class="product-select-options-color"&gt;
      &lt;option&gt;-Color&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Pink&lt;/option&gt;
      &lt;option&gt;White&lt;/option&gt;
      &lt;option&gt;Yellow&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectsq3" id="qty3" class="product-select-options-qty"&gt;
      &lt;option&gt;-QTY&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;a href="#" class="add-more"&gt;+ Add more at one time&lt;/a&gt;&lt;/p&gt;
  &lt;!-- End select options --&gt;
  &lt;input type="image" name="product-options" src="/media/blackheart/images/blackheart/add-to-cart.png"  /&gt;
  &lt;/form&gt;
</code></pre>

<p>Kindly advise</p>
