html/css/jquery click through elements and all trigger events

Question

Assuming that I have 1 button "Red" and multiple buttons behind:

<button type="button">Red</button>
<button type="button">ABC</button>
<button type="button">DEF</button>
<button type="button">GHI</button>
<button type="button">JKL</button>

Somehow, they are stacked on each others. But button "Red" is on top.

Would it be possible that clicking on "Red" will trigger events on itself and on all buttons behind ?

Using CSS "pointer-events:none;" therefore doesn't work here. As well this is a general case, so using jQuery selectors to manually select and trigger them should be ruled out.

Answer 1

You can use trigger() to trigger the click event of green and blue button when you click on red button:

$('button.red').click(function () {
    $('button.green').trigger('click'); // or .click()
    $('button.blue').trigger('click'); // or .click()
});

Fiddle Demo

Answer 2

Try putting them in css class. If you want to use javascript jquery, do .click() and activate all of them