title: Toggling select box error states based on user selections/option availability
body: <p>If the user duplicates a selection(s) based on availability being 1 <code>availableSessions</code> the select boxes should be highlighted. My problem is I'm not sure how to remove the highlights if the user selects a different option to remove duplication? Ideally I would like to individually remove an error per selection incase the user has duplicated multiple times? Basically the user should be able to continue duplicating but be warned by the error highlights.</p>
  
  <p>Here is the <code>onSessionSelect</code> method that handles this logic right now</p>
  
  <pre><code>onSessionSelect: function(event) {
  
          var $currentTarget  = $(event.currentTarget),
              classId = $currentTarget.val(),
              availableSessions = this.model.get('availableSessions');
  
  
          var selectedOption = this.$el.find('.js-sessions-select option[value="'+classId+'"]:selected'),
              len = selectedOption.length;       
  
          if(len &gt; availableSessions) {
              selectedOption.parent().addClass('error');
          } else {
              selectedOption.parent().removeClass('error');
          }
      }
  </code></pre>
  
  <p>Here is an example of the data that is being used to populate each of the select options</p>
  
  <pre><code>var availableClassesData = [{
      "id": 34,
      "name": "Core Evo"
  }, {
      "id": 686,
      "name": "Core Body Workout"
  }, {
      "id": 870,
      "name": "Boxercise"
  }, {
      "id": 1345,
      "name": "Rapid Circuits"
  }];
  </code></pre>
  
  <p>and here is the demo <a href="http://jsfiddle.net/kyllle/u3tdtdhz/" rel="nofollow">http://jsfiddle.net/kyllle/u3tdtdhz/</a></p>