Disable selected option from one select box when selected in another select box

Hi to everyone, This is my first post here,

I have 4 location select boxes with options like full chest, full back, front left chest, front right chest and so on and 4 color boxes that say the number of colors.

I am showing location one and color one select box as default, and increment them by using add one more location button or removing them by using remove location button. I am also resetting the select box of a particular location and its color, if that location is removed.

Also If one option is selected in one of the select boxes that option should be disabled in the remaining 3 select boxes. ( I have this part working )

Now, If full chest is selected in any one of the select boxes then front left chest and front right chest should be disabled in the remaining 3 select boxes. ( this part not working )

Also When I remove a location and resetting that location value, I am having hard time re-enabling the disabled option from other location boxes or the default location.

Here is a JSFIDDLE ( https://jsfiddle.net/booq3ota/ )

Here is my HTML CODE and CSS:

<div class="pc-row location-1">
    <div class="locations-colors pc-col quote-sizes">
      <h4>Choose location below</h4>
       <label for="location_one"><span>Location</span>
        <select name="location_one" id="location_one" class="linked-drop-down">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>      
        </select></label>
     
    </div>
    <div class="locations-colors pc-col quote-sizes">
      <h4>Choose number of colors for location</h4>
       <label for="color_one"><span>Number of Colors</span>
        <select name="color_one" id="color_one">
         <option value="">choose colors</option>
         <option value="0">One Color</option>
         <option value="1">Two Colors</option>
         <option value="2">Three Colors</option>
         <option value="3">Four Colors</option>
        </select></label>
     
    </div>
    </div>
    <div class="pc-row location-2">
        <div class="locations-colors pc-col quote-sizes">
       <label for="location_two"><span>Location</span>
        <select name="location_two" id="location_two" class="linked-drop-down">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>      
        </select></label>
     
    </div>
    <div class="locations-colors pc-col quote-sizes">
       <label for="color_two"><span>Number of Colors</span>
        <select name="color_two" id="color_two">
         <option value="">choose colors</option>
         <option value="1">One Color</option>
         <option value="2">Two Colors</option>
         <option value="3">Three Colors</option>
         <option value="4">Four Colors</option>
        </select></label>
     
    </div>
    </div>
        <div class="pc-row location-3">
        <div class="locations-colors pc-col quote-sizes">
       <label for="location_three"><span>Location</span>
        <select name="location_three" id="location_three" class="linked-drop-down">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>      
        </select></label>
     
    </div>
    <div class="locations-colors pc-col quote-sizes">
       <label for="color_three"><span>Number of Colors</span>
        <select name="color_three" id="color_three">
         <option value="">choose colors</option>
         <option value="1">One Color</option>
         <option value="2">Two Colors</option>
         <option value="3">Three Colors</option>
         <option value="4">Four Colors</option>
        </select></label>
     
    </div>
    </div>
        <div class="pc-row location-4">
        <div class="locations-colors pc-col quote-sizes">
       <label for="locatio_four"><span>Location</span>
        <select name="location_four" id="location_four" class="linked-drop-down">
         <option value="">choose location</option>
         <option value="Full_Chest">Full Chest</option>
         <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
         <option value="Right_Sleeve">Right Sleeve</option>      
        </select></label>
     
    </div>
    <div class="locations-colors pc-col quote-sizes">
       <label for="color_four"><span>Number of Colors</span>
        <select name="color_four" id="color_four">
         <option value="">choose colors</option>
         <option value="1">One Color</option>
         <option value="2">Two Colors</option>
         <option value="3">Three Colors</option>
         <option value="4">Four Colors</option>
        </select></label>
     
    </div>
    </div><br />
  <div class="pc-row">
  <div class="pc-col">
      <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
        <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
</div>
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}#add-location,#rm-location{margin:20px 0;width:160px;float:left}#rm-location{width:auto}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}

Code (markup):

jQUERY CODE:

var i = 1;
$(".addonemore").click(function(){
  if( i > 3){
      alert("You can add only a maximum of 4 locations");
  } else {
      i++;
      $('.location-'+i).css({'display':'table'});
  }
});
$(".rmone").click(function(){
  if( i < 2){
      alert("You need at least one location and color");
  } else {
      $('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'});
      i--;
  }
});
    $('select[name*="location"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');
    selectedOptions.each(function() {     
        var value = this.value;
        if (value !== ''){        
        var id = $(this).parent('select[name*="location"]').prop('id');
        var options = $('select[name*="location"]:not(#' + id + ') option[value=' + value + ']');
        options.prop('disabled', 'true');
        }
    });
});        

Code (markup):

Thanks and appreciate it.