Как найти значение строки определенных данных таблицы в javascript

У меня есть таблица php со значениями. Я хочу, чтобы данные двух таблиц были доступны для редактирования. У меня есть заголовки таблиц Task, Duedate, Staff, Department. Значения td извлекаются из базы данных с помощью laravel eloquent.

<table class = "table table-striped">
                <thead>
                    <tr><th scope = "col">Task</th><th scope = "col">Duedate</th><th scope = "col">Staff</th><th scope = "col">Department</th></tr>
                </thead>
                @foreach($tasks as $task)

                    <input type = "text" id = "taskid" name = "taskid" value = "{{$task->id}}" hidden>

                    <tr class = "tabletd"><td scope = "col" >{{$task->task}}</td>
                        <td scope = "col" contenteditable = "true">
                            <input type = "date" name = "duedate" id = "duedate" class='form-control form-control-sm' value = "{{$task->duedate}}" style = "width:135px;" >
                        </td>

                        <td scope = "col">{{$task->user->name}}</td><td scope = "col">{{$task->department->title}}</td>

            </tr></table>   @endforeach

и я использую ajax для обновления значений на сервере.

$(document).ready(function(){

$(document).on('change','#duedate',function(){
    var duedate=$(this).val();
    var id = $('#taskid').val();
    $.ajax({
        type:'get',
        url:'{!!URL::to('duedateupdate')!!}',
        data:{'id':id, 'duedate':duedate},
        success:function(data){
            document.getElementById("updatemsg").hidden = false; 
            setTimeout( function (){
                document.getElementById("updatemsg").hidden = true; 
            }, 2000);

        },
        error:function(){

        }
    });
});

Работает хорошо. Но обновляет только первую строку таблицы. Как мне обновить значения в других строках.