How to associate function and checkbox?

I building UI for task manager app. I have a button Get all tasks on my page. When user click on this button he get list all tasks. Each task have checkbox with status boolean done = true/false. And when task print on page then each checkbox of task have state in accordance with status of task.

When user click on checkbox then send ajax request to server which contain two values: id of task and new value of done.

But I have issue: when I click on checkbox for change done status then call all checkbox instead one checkbox which I click.

Help me fix this issue. Thank You.

This is code:

$(document).ready(function(){

    //button id.
    $("#get_all_task_but").click(function(){

        // URL of servlet.
        $.ajax({
            url : 'get_all_tasks',
            type : "post",
            success : function (data) {
                var data = JSON.parse(data);

                $.each( data, function( key, value ) {

                    var checkbox = '<input type="checkbox">';

                    document.body.addEventListener('click', function (e) {
                        if(e.target.tagName === 'INPUT' && e.target.type ==='checkbox'){

                            console.log('send to server');
                        }
                    });

                    $('#all_tasks').append(
                        $('<li></li>').append(
                            value['id'] + "<br>").append(
                                value['desc']+ "<br>").append(
                                    value['create']+ "<br>").append(
                                        checkbox + "<br>"));
                });
            }
        });
    });
});