Click event to apply only to container + make querySelectorAll work in IE11

The code opens a div/table in fullscreen.

I need the click event to apply to only the containing div so that the fullscreen effect is applied only to the div that has the button (where the click occurred).

Basically the click on the button "View fullscreen table" in the second table should work the same as the button above first table by only modifying the JS script and not the HTML. The second button should open the second table.

https://codepen.io/MistaPrime/pen/jONeKZZ

How to modify click event in that way?

var customFullscreen = document.getElementById("fullscreen-table")
        libraryFullscreen = document.getElementById("expand-fullscreen");

    if (customFullscreen && libraryFullscreen) {
        libraryFullscreen.addEventListener("click", function (evt) {
            if (customFullscreen.requestFullscreen) {
                customFullscreen.requestFullscreen();
            }
            else if (customFullscreen.msRequestFullscreen) {
                customFullscreen.msRequestFullscreen();
            }
            else if (customFullscreen.mozRequestFullScreen) {
                customFullscreen.mozRequestFullScreen();
            }
            else if (customFullscreen.webkitRequestFullScreen) {
                customFullscreen.webkitRequestFullScreen();
            }
        }, false);
    }

EDIT FOR BOUNTY: I got a working solution from @dacre-denny but it does not work in IE11. I would need to somehow make it work in IE11 as well.

from Click event to apply only to container + make querySelectorAll work in IE11