checkbox on change not giving out id for last item

checkbox HTML:

<div data-checkbox>
    <div>
        <input type="checkbox" id="item-checkbox-2">
        <label for="item-checkbox-2"></label>
    </div>
</div>

AS I clone some html before appending to the div, I also change the id for the checkbox and associated label dynamically like this:

Note: the checkbox HTML above is inside the template html that is cloned. so the checkbox HTML will be cloned for the number of entries.Therefore it's Id has to increament.

var i = 0;
function cloneCheckBox()
{
    i++
    var checkBoxId = template.find('[data-checkbox] input[type=checkbox]').attr('id');
    var newCheckBoxId = checkBoxId.replace(/[0-9]+/, i);

    template.find('[data-checkbox] input[type=checkbox]').attr('id', newCheckBoxId);
    template.find('[data-checkbox] input[type=checkbox]').next('label').attr('for', newCheckBoxId);

    /* so now the checkboxes id will be like:
    item-checkbox-1
    item-checkbox-2
    item-checkbox-3
    */
}

Up to this, it works fine..meaning id's are changed dynamically. But as I click each checkbox expecting to return clicked checkbox's id, I found that:

1) when there's only one checkbox/entry in the div, clicking checkbox doesn't give the id.

2) but when there're more entries, first checkbox when clicked, gives it's id twice. Subsequent checkboxes works fine, but the last checkbox doesn't give it's id.

I wonder why this happens: Note: [data-edit-all] is for another checkbox outside the template which if clicked, all checkboxes will get checked/unchecked.

//check individual checkbox
jQ('input[type=checkbox]:not([data-edit-all])').on('change', function() {

    var id =  jQ(this).parent().closest('[data-get-messages]').attr('id');
    var self = jQ(this);
    console.debug(id);
    if (self.is(':checked')) {

        jQ(this).prop('checked', this.checked);

    } else {

        jQ(this).removeAttr('checked');

    }

});