If/else not working with event.target selector

I have three buttons. Clicking on one should do one thing, clicking on the second one should do another thing, etc.

When you click on any of the buttons I'm seeing the same message in the console, which I don't want. Is there something wrong with my if/else logic or is something else affecting the results?

index.js:

$(document).on("click", ".dtAddClass-rolesgrid", disp._newRole);

$(document).on("click", ".dtAddClass-srchgrid", disp._newRole);

$(document).on("click", ".dtAddClass-additionalsrchgrid", disp._newRole);

JS snippet:

_newRole(e) {
        $("#dialog-form fieldset > #activate-button").hide();
        $("#dialog-form fieldset > #deactivate-button").hide();
        dialog.dialog({ title: "Add New Search/Role Filled" });
        dialog.dialog("open");

        if ($(e.target.tagName === ".dtAddClass-rolesgrid")) {
            myClass._AddNewRoleFilled();
            console.log('this is rolesgrid') // clicking on any of the buttons only shows this message
        } else if 
            ($(e.target.tagName === ".dtAddClass-srchgrid")) {
            console.log('this is srchgrid');
        } else if 
            ($(e.target.tagName === ".dtAddClass-additionalsrchgrid")) {
            console.log('this is addtsrchgrid');
        } else {
            console.log('this is e: ' + e)
        }
    }

How the buttons were created:

        let _gridNew = _grid.substring(1);
        var table = $(_grid).DataTable({
            buttons: [
                {
                  text:      '<i class="fa fa-plus"></i>',
                  titleAttr: 'Add',
                  className: 'dtAddClass-' + _gridNew
                },