使用ajax更新特定的td（表数据）

Question

I'm trying to edit grade using ajax. The showing of modal is okay but there is no data from specific grade.

This is my current code.

                    <td id="<?php echo $row['id']; ?>" data-target="grade"><?php echo $row['grade']; ?><br><small>

                        <a href="#" data-role="update" data-id="<?php echo $row['id']; ?>">Update</a></small>

                        <?php } ?> <?php } ?>
                    </td>

Here's my script

<script>
$(document).ready(function() {
    $(document).on('click','a[data-role=update]', function(){
        var id = $(this).data('id');
        var grade = $('#'+id).children('td[data-target=grade]').text();

        $('#grade').val(grade);
        $('#gradeId').val(id);
        $('#myModal').modal('toggle');
    });
});

I expect that I can only edit the specific grade. Please help me...