title: jQuery - Check drop-downs <select> for multiple values and for any changes
body: <p>My team is building out a form for an upcoming company giveaway / competition and are in need of some assistance. This form is centered on 10 multiple choice questions, for which we will provide the answers amongst 20 options in the right-hand column.</p>
  
  <p>Our goal is to scratch out any guesses the users make as they progress through the 10 fields using JavaScript or jQuery. The code I'm going to share effectively adds the desired CSS effect to the corresponding selection and it removes the class if that drop-down field is changed. This would work if we were only using one drop-down select.</p>
  
  <p>However, the issue I've run into is the CSS class, unless you pick the same option value as the one you previously selected, is removed once you make your next selection. For example, if you choose 'One' in the first drop-down, it will be correctly crossed out until you select any other option value (i.e. 2-20) in drop-downs two through ten. That second selection will be the lone list item crossed out.</p>
  
  <p><strong>Goal</strong>: If the option value is selected from any drop-down, it needs to be crossed out. If it is chosen and then deselected from all drop-downs, the CSS class needs to be removed completely. </p>
  
  <p>I apologize if my formatting and question is not clear; this is my first post. Thank you in advance.</p>
  
  <p>fiddle: <a href="https://jsfiddle.net/ehcx8vun/16/" rel="nofollow noreferrer">https://jsfiddle.net/ehcx8vun/16/</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="left"&gt;
    &lt;select name="one" class="mySelect"&gt;
    &lt;option value=""&gt;---&lt;/option&gt;
    &lt;option value="One"&gt;One&lt;/option&gt;
    &lt;option value="Two"&gt;Two&lt;/option&gt;
    &lt;option value="Three"&gt;Three&lt;/option&gt;
    &lt;option value="Four"&gt;Four&lt;/option&gt;
    &lt;option value="Five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
    &lt;select name="two" class="mySelect"&gt;
    &lt;option value=""&gt;---&lt;/option&gt;
    &lt;option value="One"&gt;One&lt;/option&gt;
    &lt;option value="Two"&gt;Two&lt;/option&gt;
    &lt;option value="Three"&gt;Three&lt;/option&gt;
    &lt;option value="Four"&gt;Four&lt;/option&gt;
    &lt;option value="Five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
    &lt;select name="three" class="mySelect"&gt;
    &lt;option value=""&gt;---&lt;/option&gt;
    &lt;option value="One"&gt;One&lt;/option&gt;
    &lt;option value="Two"&gt;Two&lt;/option&gt;
    &lt;option value="Three"&gt;Three&lt;/option&gt;
    &lt;option value="Four"&gt;Four&lt;/option&gt;
    &lt;option value="Five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
    &lt;select name="four" class="mySelect"&gt;
    &lt;option value=""&gt;---&lt;/option&gt;
    &lt;option value="One"&gt;One&lt;/option&gt;
    &lt;option value="Two"&gt;Two&lt;/option&gt;
    &lt;option value="Three"&gt;Three&lt;/option&gt;
    &lt;option value="Four"&gt;Four&lt;/option&gt;
    &lt;option value="Five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
    &lt;select name="five" class="mySelect"&gt;
    &lt;option value=""&gt;---&lt;/option&gt;
    &lt;option value="One"&gt;One&lt;/option&gt;
    &lt;option value="Two"&gt;Two&lt;/option&gt;
    &lt;option value="Three"&gt;Three&lt;/option&gt;
    &lt;option value="Four"&gt;Four&lt;/option&gt;
    &lt;option value="Five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
    &lt;ul&gt;
      &lt;li class="multiple-choice-list"&gt;One&lt;/li&gt;
      &lt;li class="multiple-choice-list"&gt;Two&lt;/li&gt;
      &lt;li class="multiple-choice-list"&gt;Three&lt;/li&gt;
      &lt;li class="multiple-choice-list"&gt;Four&lt;/li&gt;
      &lt;li class="multiple-choice-list"&gt;Five&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>