Set checkboxes to checked based on Ajax GET request

I'm trying to get the checkboxes checked based on data coming from the server through an ajax get request:

---

var GetTodos = (function () {
//GET/READ 
   return $.ajax({
        url: '/api/Todos/GetTodos',
        contentType: 'application/json',
        success: function (todos) {
            var tbodyEl = $('tbody');
            $.each(todos, function (i, todo) {
                if (!todo.isCompleted)
                    $('#myCheckbox').prop('checked', false);
                else
                    $('#myCheckbox').prop('checked', true);
                tbodyEl.append('\
                    <tr>\
                        <td><input type="checkbox" value="'+todo.id+'" id="myCheckbox" checked/></td>\
                        <td class="id">' + todo.id + '</td>\
                        <td><input type="text" class="name" value="' + todo.text + '"></td>\
                        <td>\
                            <button id="editBtn" class="btn btn-warning">Update</button>\
                            <button id="deleteBtn" class="btn btn-danger">Delete</button>\
                        </td>\
                    </tr>\
                ');
            });
        }
    });
});

---

so i'm sending an ajax get request to get json data and the following response is this

---

[
  {
    "id": 1,
    "text": "Walk the dog",
    "isCompleted": false
  },
  {
    "id": 4,
    "text": "go out with friends",
    "isCompleted": false
  },
  {
    "id": 5,
    "text": "touch the fishy",
    "isCompleted": true
  }
]

---

this is what I ended up with

---

---

so the checkboxes doesn't get checked properly. If someone can help me out with this it will be much appreciated, thanks.