The second dropdown value for multiple dropdown value NOT SAVE in database using laravel

Hye everyone! First of all, my coding all about dynamic dropdown value, the issues now is the second dropdown value is not save inside the database. Which part did I missed or wrong?

View:-

<div class="col-md-3">
    <select class="shiftPatternID" name="inputShiftPatternID" id="inputShiftPatternID" required style="width: 100%">
        <option value="" hidden disabled selected>Please Select</option>
        @foreach ($shiftpattern as $singleshiftpattern)
            <option value="{{ $singleshiftpattern->id }}">{{ $singleshiftpattern->id }} - {{ $singleshiftpattern->code }}</option>
        @endforeach
    </select>
</div>

<div class="col-md-3">
    <select class="sapCode" name="inputSapCode" id="inputSapCode" required style="width: 100%">
        <option value="0" disabled="true" selected="true">Please Select</option>
    </select>
</div>

View for second dropdown using jquery script:-

$(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].id+'">'+data[i].code+' - '+data[i].description+'</option>';
                }

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

            }
        });
    });
});

Controller:-

public function store(Request $req)
{
    $var_shift_pattern_id = $req ->inputShiftPatternID;
    $var_sap_code = $req ->inputSapCode;

    $usp_var = new UserShiftPattern;
    $usp_var-> shift_pattern_id = $var_shift_pattern_id;
    $usp_var-> sap_code = $var_sap_code;
    $usp_var->save();
    $execute = UserHelper::LogUserAct($req, "User Work Schedule Management", "Create User Work Schedule " .$req->inputUserID);
    $feedback_text = "Successfully created User Work Schedule ".$req->inputUserID.".";
    $feedback_title = "Successfully Created";

    return redirect(route('usp.index', [], false))
        ->with([
            'feedback' => true,
            'feedback_text' => $feedback_text,
            'feedback_title' => $feedback_title
        ]);
}

Routes:-

Route::get('/findSapCode','AdminUserShiftPatternController@findSapCode');
Route::get('/admin/usershiftpattern', 'AdminUserShiftPatternController@index')->name('usp.index');
Route::post('/admin/usershiftpattern/add', 'AdminUserShiftPatternController@store')->name('usp.store');
Route::post('/admin/usershiftpattern', 'AdminUserShiftPatternController@index')->name('usp.index');

Answer

The issue is with option value wrongly passed in jquery.It should be data[i].code instead of data[i].id

op+='<option value="'+data[i].code+'">'+data[i].code+" "+data[i].description+'</option>'

Also you might need to update query as well to show description

$data=ShiftPattern::select('code','id','description')->where('id',$request->id)->take(100)->get();