How to properly do an Ajax Post in Laravel 5.8?

I have no idea why my code is not working right now. I have checked other questions similar to mine and as far as I can see, the ajax should be working.

This is currently my code:

Route in web php:

Route::post('/promo-codes/code-gen','PromoCodesController@codeGen')->name('promocodes.code-gen');

Controller

public function codeGen(Request $request)
{
    $newcode1 = "testCode1";
    $newcode2 = "testCode2";
    $codeType = $request->input('codeType');

    switch ($codeType){
        case 'A':
            return response()->json(['code1'=>$newcode1]);
        break;
        case 'B':   
            return response()->json(['code1'=>$newcode1,'code2'=>$newcode2]);
        break;
        default:
            return response()->json(['error'=>"error"]);
    }

Script

<script>

$(document).ready(function() {
    $('#btn-gen-code').click(function(e){
        console.log("Test 1");

        var codeType = document.getElementById('code_type').value;
        $.ajax({
            url:"/promo-codes/code-gen", 
            type: "POST", 
            dataType: 'JSON',
            data: {codeType: codeType},
            success:function(data){
                console.log("Test 2");
                console.log(data.code1);
                document.getElementById('code1').value = data.code1;
                document.getElementById('code2').value = data.code2;
            },
            error:function(data) { 
                console.log("Error on ajax");
                console.log(data.error);
                console.log(data);
            }
        });
    });
});

Console logs

Test 1
Error on ajax
undefined
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, 
overrideMimeType: ƒ, …}

Console logs Picture

via Chebli Mohamed