JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box0" class="mybox">
    <span class="label">box</span>
    <div class="content">
        <div id="box1" class="mybox">
            <span class="label">innerbox</span>
            <div id="box2" class="mybox">
                <span class="label">innerinnerbox</span>
            </div>
        </div>
        <div id="box3" class="mybox">
            <span class="label">innerbox2</span>
            <div id="box4" class="mybox">
                <span class="label">innerinnerbox2</span>
            </div>
        </div>
    </div>
</div>

<div id="output"></div>

CSS

body > .mybox {
    border: solid 1px green;
}
.mybox { 
    padding: 16px 0 0 16px;
    border: solid 1px royalblue;
}

.mybox > .mybox {
    border: solid 1px red;
}
#box0 > .content {
    border: solid 4px yellow;
    padding: 4px;
}

JavaScript

(function($) {

    $.fn.closestDown = function(selector) {

        var selection = [];

        var query = function() {
            this.children().each(function() {
                var $this = $(this);
                if ($this.is(selector)) {
                    selection.push(this);
                }
                else {
                    query.call($this);
                }
            });
        };
        query.call(this);

        return this.pushStack(selection, "closestDown", selector);
    };

})(jQuery);

$(function() {

    
    $("#output").append("closestDown to 'box': ");
    $("#box0").closestDown(".mybox")
    .each(function() {
        $("#output").append(
            $(".label", this).html() + ", "
        );
    });


});