Select/Deselect checkbox does not work after selectAll checkbox clicked

I have a jquery datatable. One of its column consists of checkboxes as you can see here . Now, when I click the checkboxes on the rows they work fine. I mean it prints out one of the single select class checkbox is checked or one of the single select class checkbox is unchecked, since I added these on the event handler. However, if I click select all once, my individual checkboxes does not run anymore (it does not print out these messages).Select all checkboxes look like work fine. (selects all individual boxes). Here is my select all and single select checkbox related code :

SelectAll handler :

$('input[type="checkbox"][id="selectAll"]').click(function () {
    if ($(this).prop("checked") == true) {
        converter.checkAll(true);

    } else if ($(this).prop("checked") == false) {
        converter.checkAll(false);
    }
});

checkAll function

Converter.prototype.checkAll = function (checktoggle) {
    var data = (this.resultTable).fnGetData();
    for (var i in data) {
        var row = $('<div>' + data[i][3] + '</div> ');

        row.children('input').attr('checked', (checktoggle) ? 'checked' : false);
        row.children('input').attr('id', 'singleSelect');
        console.log(row.html());

        (this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
    }
    (this.resultTable).fnDraw();
}

Single Select Handler

$('input[type="checkbox"][id="singleSelect"]').click(function () {

    alert("asdasdasdasd");
    if ($(this).prop("checked") == true) {
        alert('one of the single select class checkbox is checked');
    } else if ($(this).prop("checked") == false) {

        alert('one of the single select class checkbox is unchecked');
    }
});