jQuery match up two different select boxes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="state1" id="state1" name="state1">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
</select>

<select id="state2" name="state2" size="0" class="state2">    
  <option value="55" class="has-children">AL</option>
  <option value="25" class="has-children">AK</option>
  <option value="200" class="has-children">AZ</option>
  <option value="123" class="has-children">AR</option>
  <option value="216" class="has-children">CA</option>
  <option value="275" class="has-children">CO</option>
  <option value="340" class="has-children">CT</option>
</select>

$(document).ready(function () {   
 $("#state1").change(function() {
  var val = $(this).val();
  $('#state2 option').each(function(){
   var val2 = $(this).html();
   console.log(val2);
   if (val2 == val) {
    //$(this).prop('selected', true);
    $(this).remove(); // remove option from select
   } else {
    $(this).prop('selected', false);
   }
  });
 });
 

});
</script>