I have a PHP table populated with values, and I want to make two of the table data cells editable. The table headers include: Task, Due Date, Staff, and Department. The values in the table data are retrieved from a database using Laravel Eloquent.
<table class="table table-striped">
<thead>
<tr><th scope="col">Task</th><th scope="col">Due Date</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
I am utilizing AJAX to update these values on the server.
$(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(){
}
});
});
The code works fine, but it only updates the first row of the table. How can I extend this functionality to update values in the other rows as well?