Как добавить и удалить опцию выбора в зависимости от другой опции выбора

Question

У меня есть 2 выбранных компонента, один для категории, а другой для партнера.Опция выбора партнеров должна меняться в зависимости от типа пользователя, выбранного в категории.В разделе JavaScript я использовал оповещения, чтобы проверить, удалена ли опция или нет.Приведенный ниже код работает нормально, как и ожидалось в первый раз.Но после этого выбор партнера не меняется

$('#pageCategory').on('selectmenuchange', function() {
 
        
        var partnerCategory = "${partnerCategory}";
        
        var categoryVal = $(this).val();
        //alert("cat = "+categoryVal+" pat = "+partnerCategory);
        var keyIndex = partnerCategory.indexOf(categoryVal);
        alert("key index = "+keyIndex);
        var firstOpeningIndex = 0.1;
        var firstClosingIndex;
        var subStringList = "";
        var subStringArray = "", count = 0;
        
        //finding the first occurrence of [
        if(keyIndex != -1)
        {
            for(var i = keyIndex; i < partnerCategory.length; i++)
        {
            if(partnerCategory.charAt(i) == "[")
                firstOpeningIndex = i;
            //opening brace has found
            if(firstOpeningIndex != 0.1)
            {
                if(partnerCategory.charAt(i) == "]")
                {
                    firstClosingIndex = i;
                    break;
                }    
                
            }
            
        }
        
        //substring from the partnerCategory 
        subStringList = partnerCategory.substring(firstOpeningIndex+1, firstClosingIndex);
        subStringArray  = subStringList.split(",");
        
        alert("array = "+subStringArray);
        
        $("#pagePartner >option").each(function(){
            if(count != 0)
            {
                alert("entered");
                $(this).remove();
            }
            count++;
            
        });
        $("#pagePartner >option").each(function(){
            alert("del val = "+$(this).val());
        });
        for(var i = 0; i < subStringArray.length; i++)
        {
            $("#pagePartner").append("<option>"+subStringArray[i]+"</option>");
            
        }
        //display
        
        $("#pagePartner >option").each(function(){
            alert("val = "+$(this).val());
        });
        
    }
        else{
            alert("Partner not available");
        }
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="col-md-3">
                    <label>Partner</label><span class="mandatory_star">*</span>
                    <fieldset class="infield">
                        <form:select path="pagePartner" id="pagePartner"   >
                            <form:option value="-1">Select Partner</form:option>
                            <form:options items="${partnerList}"/>
                        </form:select>
                    </fieldset>
                </div>
                
                
<div class="col-md-3">
                     <label>Category</label><span class="mandatory_star">*</span>
                     <fieldset class="infield">
                         <form:select path="pageCategory" id="pageCategory" >
                            <form:option value="-1">Select Category</form:option>
                            <form:options items="${categoryList}"/>
                         </form:select>
                      </fieldset>
                     
                     
                </div>