Why on the update popup, the dynamic dropdown did not work properly in Laravel 8?

Hye everyone! I want to do update method for my dynamic dropdown. The issue is the update dropdown value show all value, as you all known, For example: Dropdown 1, user select fashion, then dropdown 2 will appear 1 value which is dress for example.

Blade edit:-

   "<div class='row'>"+
                            "<div class='col-md-4'>"+
                                "<p>Shift Pattern ID</p>"+
                            "</div>"+
                            "<div class='col-md-8'>"+
                                "<select id='ps_shiftpatternid' class='check-2' value='"+ps_shiftpatternid+"' style='width: 100%'>";
                                @foreach($shiftpattern as $singleshiftpattern)
                                    if(ps_shiftpatternid=='{{$singleshiftpattern->id}}'){
                                        html = html + "<option value='{{$singleshiftpattern->id}}' selected>{{$singleshiftpattern->id}}</option>";
                                    }else{
                                        html = html + "<option value='{{$singleshiftpattern->id}}'>{{$singleshiftpattern->id}}</option>";
                                    }
                                @endforeach
                                html = html + "</select>"+
                            "</div>"+
                        "</div>"+
    
                        "<div class='row'>"+
                            "<div class='col-md-4'>"+
                                "<p>SAP Code</p>"+
                            "</div>"+
                            "<div class='col-md-8'>"+
                                "<select id='ps_sapcode' class='check-3' value='"+ps_sapcode+"' style='width: 100%'>";
                                @foreach($shiftpattern as $singleshiftpattern)
                                    if(ps_sapcode=='{{$singleshiftpattern->code}}'){
                                        html = html + "<option value='{{$singleshiftpattern->code}}' selected>{{$singleshiftpattern->code}}</option>";
                                    }else{
                                        html = html + "<option value='{{$singleshiftpattern->code}}'>{{$singleshiftpattern->code}}</option>";
                                    }
                                @endforeach
                                html = html + "</select>"+
                            "</div>"+
                        "</div>";

Script code in blade:-

$(document).ready(function(){

    $(document).on('change','.shiftPatternID',function(){

        var cat_id=$(this).val();
        var div=$(this).parent().parent().parent();
        var op=" ";

        $.ajax({
            type:'get',
            url:'{!!URL::to('findSapCode')!!}',
            data:{
                'id':cat_id
            },
            
            success:function(data){
                op+='<option value="0" selected disabled>Please Select</option>';
                for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].code+'">'+data[i].code+" - "+data[i].description+'</option>'
                }

                $('.sapCode').html('') ; 
                $('.sapCode').append(op);
            },
            error:function(){

            }
        });
    });
});