JSFiddle - React, Tailwind, and code Playground

HTML

<div class="interface" name="a">
    <div class="control">control</div>
    <div class="branch">
        <div class="control">control</div>
        <div class="interface">
            <div class="branch">
                <div class="control">control</div>
            </div>
        </div>
    </div>
    <div class="interface" name="c">
        <div class="branch">
            <div class="control">control</div>
        </div>
    </div>
</div>

JavaScript

$(".interface[name=c] .control:not(.interface[name=c] .interface .control)").css("background-color", "red");
$(".interface[name=a] .control:not(.interface[name=a] .interface .control)").css("background-color", "green");

$(".interface").on("click", ".control", function (event) {
    alert($(this).text());
    event.stopPropagation();
});