How to fix my problem, the data that I get from database using ajax would not appear on bootstrap modal

Question

I have this code in youtube I followed and in some point it works without laravel but when i used it in laravel it got some problem. Im trying to edit/update the data from the table(html) using modal but the problem is the data that i got in my database(mysql) does not appearing in modal, the only data that appears is the ID of the item in the table. Also, when i print the data on console it gives me the correct data. Ive spent so much time looking for the problem and solution but still i cant move on so i tried to post here. Hope someone can help me. It would be a great-great help. THANK YOU!

THE BLADE FILE/HTML

<div class="modal fade" id="customerEditModal" tabindex="-1" role="dialog" aria-labelledby="" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header" style="color: green;">
            <h5 class="modal-title" id=""><i class="fas fa-edit"></i> Edit Customer Info/Account</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" style="color: green !important;">&times;</span>
            </button>
        </div>
        <form role="form" method="POST">
        {{ csrf_field() }}
            <div class="modal-body">

                <input class="form-control" type="" name="customer_id" id="customer_id">

                <div class="form-group">
                    <label>Firstname</label>
                    <input name="firstname" id="firstname" value="" class="form-control">
                </div>
                <div class="form-group has-success">
                    <label>Lastname</label>
                    <input name="lastname" id="lastname" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Address</label>
                    <input name="address" id="address" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Phone Number</label>
                    <input name="phone_number" id="phone_number" type="number" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Type</label>
                    <select class="form-control" name="type" id="type">
                        <option value="HO">Home Owner</option>
                        <option value="BO">Business Owner</option>
                        <option value="MRF">Material Recovery Facilitaty</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input name="email" id="email" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input name="password" id="password" type="text" class="form-control"  placeholder="">
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-sm btn-success">Add Customer</button>
            </div>

            </div>
        </form>

        </div>
    </div>
</div>

THE SCRIPT for AJAX

$('.editbtn').click(function(){
        var customer_id = $(this).attr("id");
        console.log(customer_id);

    $.ajax({
        url:"{{ route('customerEdit') }}",
        method:"get",
        data:{customer_id:customer_id},
        dataType:"json",
        success:function(data){
                $('#customerEditModal').find('#customer_id').val(customer_id);
                // $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#lastname').val(data.lastname);
                $('#address').val(data.address);
                $('#phone_number').val(data.phone_number);
                $('#email').val(data.email);
                $('#password').val(data.password);
                $('#customerEditModal').appendTo('body').modal('show');
                console.log(data);
                console.log(data.firstname);

        },error:function(xhr,status,error){
            var err = eval('('+xhr.responseText+')');
            alert(err.message);
        }
    });
});

THE CONTROLLER (just the function)

public function customerShowByIdToEdit(Request $request){
        $id = $request->input('customer_id');
        $customer = DB::table('customer')
        ->join('users', 'users.id', 'customer.users_id')
        ->select('customer.id',
                 'customer.firstname as firstname',
                 'customer.lastname as lastname',
                 'customer.address',
                 'customer.phone_number',
                 'customer.type',
                 'users.email',
                 'users.password')
        ->where('customer.id','=', $id)
        ->get();

        return json_encode($customer);
    }

THE ROUTE (..on web.php)

Route::get('/dashboard/customerEdit', 'CustomerController@customerShowByIdToEdit')->name('customerEdit');

the result from console.log(data): enter image description here

Answer 1

Change the last part of the query ->get(); to ->first(); as you are retrieving a specific single row. then try:

$('#customerEditModal').find('#customer_id').val(data.customer_id);
$('#customerEditModal').find('#firstname').val(data.firstname);
$('#customerEditModal').find('#lastname').val(data.lastname);
$('#customerEditModal').find('#address').val(data.address);
$('#customerEditModal').find('#phone_number').val(data.phone_number);
$('#customerEditModal').find('#email').val(data.email);
$('#customerEditModal').find('#password').val(''); //Either remove this line or ask the user to confirm the password for the update
$('#customerEditModal').modal();

Answer 2

I don't really know what's happening, but you can try this.

Change the input id from firstname to be firstnamexxx and then on AJAX return you can use $('#firstnamexxx').val(data.firstname);.

Because id on in experience must be unique on 1 page loaded, it cannot be the same even inside different elements (modal, form, etc).