Как сделать отклик дочерних элементов по клику?

Question

[Дмитрий Шалимов]

Есть блок #block-editor, этот блок и всех находящихся в нем блоки (не только прямые потомки) должны подсвечиваться по клику, а в дальнейшем по клику на блок #add должно происходить добавление блока в активный.
Проблема заключается в том, что по клику он распознает только родительский блок.

$(document).ready(function(){
    $("#block-editor div").click(function(){
        $(".active").removeClass("active");
        $(this).toggleClass("active");
    });
    $("#add").click(function(){
        $(".active").append("<div class='col-xs-1'>-</div>")
    })
});

<div class="container-fluid">
        <div id="block-editor" class="col-xs-10">
            <div id="1" class="col-xs-3 smt-block">1</div>
            <div id="2" class="col-xs-3 smt-block">2</div>
            <div id="3" class="col-xs-3 smt-block">3</div>
            <div id="4" class="col-xs-3 smt-block">4</div>
        </div>
        <div class="col-xs-2">right</div>
    </div>
    <div class="container">
        <div class="col-xs-4" id="add">add</div>
        <div class="col-xs-4" id="del">del</div>
        <div class="col-xs-4" id="opt">option</div>
    </div>

Comments

[Дмитрий Шалимов]

Работать должно так.

Есть блок #block-editor, этот блок и всех находящихся в нем блоки (не только прямым потомкам) должны подсвечиваться по клику, а в дальнейшем по клику на блок #add должно происходить добавление блока в активный.