JSFiddle - React, Tailwind, and code Playground

HTML

<span title="Fruit" class="ms-RadioText">
  <input id="groupType_0" type="checkbox" checked="checked"/> <label>Fruit</label>
</span>
<br>
<span title="Pies" class="ms-RadioText">
   <input id="groupType_1" type="checkbox" />  
   <label>Pies</label>
</span>
<br><br>
<select id="Use_d8ffe43">
  <option value="Apples">Apples</option>
  <option value="Grapes">Grapes</option>
  <option value="Both">Both</option>
</select><BR><BR>

JavaScript

$(document).ready(function() {
  var whatSelected = new Array();
  var piesOnly = false;
  whatSelected.push('fruit'); // initial preset
  
  var groupTypeField = $('input[id*="groupType"]');
  groupTypeField.on('change', function() {
    //alert(this.id);
    var thisId = this.id.split('groupType_')[1];
    //alert(thisId);
    var thisChecked = this.checked;
    var key = "";
				if (thisId == 0)
					key = "fruit";
				else
					key = "pies";
		//alert(key);
    
    if (whatSelected.indexOf(key) == -1 && thisChecked) {
					whatSelected.push(key);
					//alert('push: ' + key);
		}
		if (whatSelected.indexOf(key) != -1 && !thisChecked) {
					//alert('pull: ' + key);
					var index = whatSelected.indexOf(key);
					//alert('index: ' + index);
					if (index != -1) {
					    whatSelected.splice(index, 1);
					    //alert(key);
					    if (key == 'pies') { 					    	
					    	piesOnly = false;	
					    }
					    //alert('pulled ' + key);
					}				
		}
		alert('after alteration: ' + whatSelected);
    
    if (whatSelected.indexOf('pies') != -1) { // Pies checked	
    	if (whatSelected.indexOf('fruit') != -1) { // Fruit checked, so not Pies only
          piesOnly = false;
        	// Add "Grapes" and "Both" back, if gone
						var exists = false; 
						$('select[id*="Use"] option').each(function(){
						  if (this.value == "Grapes") {
						    exists = true;
						  }
						});					
						if (!exists) {
							alert('added');
							$('select[id*="Use"]').append('<option value="Grapes">Grapes</option>');
							$('select[id*="Use"]').append('<option value="Both">Both</option>');
						}
      } else {
				piesOnly = true;
        // Remove Grapes and Both from dropdown
        $('select[id*="Use"]').find('option[value="Grapes"]').remove();					$('select[id*="Use"]').find('option[value="Both"]').remove();
				alert('removed');
			}
   } else { // Pies not checked
					if (whatSelected.indexOf('fruit') != -1) { // Fruit checked, so not pies only
        ...