Semantic-UI: adding .api using wildcard selector and get access to the specific element

问题

As seen here the selectors id #username is binded twice and nested. In the first binding, the value can be set with $(this).val(); and the be used in the second, nested binding for the Semantic-UI API.

But what if I have several elements like element_1, element_2 etc?

Right now, I'm using this code, but the event is fired for each element that matches the wildcard [id^=unbind_]and not only (like it should be) for the clicked element:

$(document).on('click','[id^=unbind_]', function(){
    var permission=$(this).attr('data-value');
    var id=$(this).attr('id');
    var role_id=$(this).attr('data-roleid');
    //console.log('Permission:' + id);
    $('[id^=unbind_]')
        .api({
            action: 'unbind permissions',
            on: 'now',
            method: 'DELETE',
            data: { 'permission': permission},
            onSuccess: function(data) {
                console.log('SUCCESS: ' + id);
                remove_element(id);
                decr('#role_cnt_' + role_id);
            }
        });
});

来源：https://stackoverflow.com/questions/49508257/semantic-ui-adding-api-using-wildcard-selector-and-get-access-to-the-specific