JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container_A">
    <div class="a red block">MENU</div>
    <div class="button" id="button_A1"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
    </div>
    <div><span><p>some not button related text</p></span></div>
    <span><img src="http://cnn.com/.a/1.102.2/assets/logo_cnn_badge.png"></span>
    <div class="button" id="button_A2"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
    </div>
    <div class="button" id="button_A3"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
        <div class="some icon"></div>
    </div>
    <div><span><p>some more text</p></span></div>
    <span><img src="http://cnn.com/.a/1.102.2/assets/logo_cnn_badge.png"></span>
    <div class="button" id="button_A4"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
        <div class="some icon"></div>
    </div>
    <div class="button" id="button_A5"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
        <div class="some icon"></div>
    </div>
    <div class="spacer"></div>
</div>
<div id="res"></div>
<div id="container_B">
    <div class="a red block">MENU</div>
    <div class="button" id="button_B1"> <span>click me I'm a button</span>

        <img src="http://static.bbci.co.uk/frameworks/barlesque/2.83.4/desktop/3.5/img/blq-blocks_grey_alpha.png">
    </div>
    <div><span><p>some not button related text</p></span></div>
    <span><img src="http://cnn.com/.a/1.102.2/assets/logo_cnn_badge.png"></span>
    <div class="button" id="button_B2"> <span>click me I'm a...

CSS

#container_A, #container_B {
    width: 400px;
    border: 2px solid #aaa;
    padding: 5px;
}
.block {
    width: 100%;
    text-align: center;
}
.red {
    background: red;
}
#container_A .button, #container_B .button {
    float: left;
    width: 96px;
    margin:2px;
}
#container_A .button {
    background:orange;
}
#container_B .button {
    background:cyan;
}
p, span, img {
    float:left
}
.spacer {
    clear:both;
    width:100%;
    height:30px;
    background:red;
}
p {
    width:100px;
    display:block;
}
#res{height: 2em;line-height:2em;font-weight:bold;}

JavaScript

document.getElementById('button_A1').addEventListener('click', dosomething, false);
    document.getElementById('button_A2').addEventListener('click', dosomething, false);

    document.getElementById('button_A3').addEventListener('click', dosomething, false);

    document.getElementById('button_A4').addEventListener('click', dosomething, false);

    document.getElementById('button_A5').addEventListener('click', dosomething, false);

    function dosomething(e) {
        var button = e.currentTarget.id;
        document.getElementById('res').innerHTML = 'Direct hit. You clicked ' + button;
    }

    document.getElementById('container_B').addEventListener('click', dosomethingB, false);

    function dosomethingB(e) {
        var container = e.currentTarget;
        var clicked = e.target;
        var i = 0;

        while (clicked != container) {
            i++;
            if (clicked.className == 'button') {
                var button = clicked.id;
                document.getElementById('res').innerHTML = 'You clicked ' + button + '. ' + 'I looped ' + i + ' times';
                return;
            } else {
                clicked = clicked.parentNode;
            }
        }
        document.getElementById('res').innerHTML = 'No button here, but I looped ' + i + ' times';
    }