Update td value that are inside a php foreach loop with ajax

Question

I'm sending data from MySql query to a blade.php. I'm passing this data to a table.

Then I've got a php foreach loop that iterates through each row from the query.

I'm trying to update individual lines from the td with ajax but no matter which row you update it always takes the last rows values and updates all the rows to the same values.

It's also not passing the correct id through to the ajax request. it passes the first rows id through but updates with the last rows data.

Could you please assist me in finding my issue.

The idea here is to be able to update individual lines. So I want to pass the value from the the hidden input with name="phone_id" to my php function via my ajax request. Currently it passes only the first rows value from the hidden input field.

First the form

<div class="row">

            <div class="col-12 col-md-8 offset-md-2 text-center mt-30 rename">

                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Number</th>
                        <th scope="col">Description</th>
                        <th scope="col">Balance</th>
                        <th scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($phones as $phone)
                        <tr>
                            <th scope="row"><input value="{{$phone->phone_account}}" type="text" name="phone_account{{$phone->phone_id}}"></th>
                            <td><input value="{{$phone->description}}" type="text" name="description{{$phone->phone_id}}"></td>
                            <td><input value="{{ $phone->balance }}" disabled></td>
                            <td>
                                <input type="text" value="{{ $phone->phone_id }}" name="phone_id" hidden>
                                <input id="VerifyBtn" onclick="postData()" type="submit" class="btn btn-profile" value="Update">
                                <a href="{{ route('phonedelete', ['id'=>$phone->phone_id]) }}" role="button" class="btn btn-profile">Delete</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            </div>

        </div>

    </div>

Ajax request

function postData() {
                var id = $("input[name=phone_id]").val();
                var phone_account = $("input[name=phone_account{{$phone->phone_id}}]").val();
                var description = $("input[name=description{{$phone->phone_id}}]").val();
                var user_id = {{$phone->user_id}};
                $.ajax({
                    url: '{{ route('update_phone.post')}}',
                    type: 'POST',
                    data: {
                        phone_account: phone_account,
                        description: description,
                        user_id: user_id,
                        id:id,
                    },
                    cache: false,
                    success: function (data) {
                        var data = data;
                        console.log(data)
                        if (data == 'success') {
                            $('#success').show();
                            $('#success').html('phone account successfully updated.');
                        }else{
                            alert('Error occurred, please try again later...');
                        }
                    }
                });
            }

update function

public function update_phone(Request $request){

        $id = $request->id;
        $user_id = $request->user_id;
        $phone_acc = $request->phone_account;
        $phone_desc = $request->description;
        $date = date("Y-m-d H:i:s");
        DB::table('phone_details')
            ->where('user_id', $user_id)
            ->where('phone_id', $id)
            ->update(['phone_account' => $phone_acc,
                      'description' => $phone_desc,
                      'updated_at' => $date]);
  
        echo 'success';

    }

Answer 1

You could make your life easier and just make the ID relative to each TR, allowing you to clean up some of the inputs, including getting rid of the hidden phone_id input. I changed the name to class because to me it's cleaner looking in jQuery, like this:

@foreach ($phones as $phone)
    <tr data-phoneid="{{$phone->phone_id}}">
        <th scope="row"><input value="{{$phone->phone_account}}" type="text" class="phone-account"></th>
        <td><input value="{{$phone->description}}" type="text" class="phone-description"></td>
        <td><input value="{{ $phone->balance }}" disabled></td>
        <td>
            <input id="VerifyBtn" onclick="postData(this)" type="submit" class="btn btn-profile" value="Update">
            <a href="{{ route('phonedelete', ['id'=>$phone->phone_id]) }}" role="button" class="btn btn-profile">Delete</a>
        </td>
    </tr>
@endforeach

Then in your javscript, it's a little easier to read:

function postData(el) {
    let $parent = $(el).closest('tr');
    var id = $parent.attr('data-phoneid');
    var phone_account = $parent.find('phone-account').val();
    var description = $parent.find('phone-description').val();
    var user_id = @json($phone->user_id);
    $.ajax({
        
        ........
}