Get dynamic group of checkboxes grouped by an attribute

im developing an ACL manager and permissions on ACL GUI are created dynamically based on controllers in database. So if they are 3 controllers for example, I get 3 groups of 4 checkboxes (read, write, delete, execute). They have different ids, value based on checkbox (read=r, write=w...) and same data-id as controller id.

<ul class="list-group">
home                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1">
        <label for="check_permisssion_read1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1">
        <label for="check_permisssion_write1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1">
        <label for="check_permisssion_delete1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1">
        <label for="check_permisssion_execute1" class="label-success"></label>
    </div>
</li>
acl                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
        <label for="check_permisssion_read2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2">
        <label for="check_permisssion_write2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
        <label for="check_permisssion_delete2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2">
        <label for="check_permisssion_execute2" class="label-success"></label>
    </div>
</li>
acl_funcion1                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
        <label for="check_permisssion_read3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3">
        <label for="check_permisssion_write3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3">
        <label for="check_permisssion_delete3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
        <label for="check_permisssion_execute3" class="label-success"></label>
    </div>
</li>

So when I click on save button, I need to get checked checkboxes but grouped by data-id, how can I get this?

I only got looping all checkboxes and checking if is checked, if is, return data-id+value (1r, 1w...) for example.

var checkboxes = $('.acl_permission');
        checkboxes.each(function(idx, el){
            if ($(this).is(':checked')) {
                console.log($(this).data('id') + $(this).val())
            }
        });

But like this, im getting:

1r
1w
2r
2w
3w

I would like to get something like:

[{data-id: 1, permissions: 'rw'}, {data-id: 2, permissions: 'rw'}, {data-id: 3, permissions: 'w'}] based on data-id (controller id) and permissions checked on that data-id (r,w,d,e).

Thanks!!