JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer" id="a"> div a
    <div class="inner"> div b
        <div class="outer"> div c
            <div class="inner"> div d </div>
        </div>
    </div>
    <div class="inner"> div b
        <div class="outer"> div c
            <div class="inner"> div d </div>
        </div>
    </div>
    <div class="outer"> div c
        <div class="inner"> div d </div>
    </div>
    <div class="outer"> div c
        <div class="inner"> div d </div>
    </div>
</div>

<div class="outer"> outer-a
    <div>
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div class="inner"> inner-b </div>
            </div>
        </div>
    </div>
    <div>
        <div class="inner"> inner-a </div>
    </div>
</div>

//sample 2
<div class="outer"> outer-a
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div>
                    <div class="inner"> inner-b </div>
                </div>
            </div>
        </div>
</div>

//sample 3
<div class="outer"> outer-a
        <div class="inner"> inner-a
            <div class="outer"> inner-b
                <div class="inner"> inner-b
                    <div class="outer"> outer-c 
                        <div class="inner"> inner-c</div>
                    </div>
                </div>
            </div>
        </div>
</div>

//bonus sample (we're trying to avoid this)
<div class="outer"> outer-a
        <div class="inner outer"> inner-a outer-b
            <div class="inner"> inner-b </div>
        </div>
</div>

CSS

div { padding:5px;margin:5px;border:solid 1px silver; }

div.Selected { border-color:black; }

JavaScript

function selectInners(){
    $('.Selected').removeClass('Selected');
    var o = $(this).parent();
    
    o.find('.inner').not(o.find('.outer .inner'))
        .addClass('Selected');
}

var button = $("<input type='button' value='Outer' />");
$('.outer').prepend(button);
$('.outer > input').click(selectInners);