Разработка клона JQuery интерфейса построителя запросов

Question

Я хочу разработать фильтр поиска, похожий на JQuery QueryBuilder , но я сталкиваюсь с этой ошибкой, которая ведет к main. js:

filter.html:35 Uncaught SyntaxError: Unexpected identifier

Пока что я иметь:

фильтр. html

    <div class="filter" id="root">
        <div class="form-group">
            <select class="form-control" id="exampleFormControlSelect1">
                <option>Table1</option>
                <option>Table2</option>
                <option>Table3</option>
                <option>Table4</option>
            </select>
        </div>
    </div>
 ...
 <script src='main.js'></script><!-- filter.html:35 -->

main. js
Классы для дерева logi c

class TreeNode {

}
class TreeGroup extends TreeNode {
    parent = null;
    children = [];
    condition = null;
    id = null;

    constructor() {
        super();
        this.id = Math.random().toString(36).substring(7);
    }
    addChild(node) {
        this.children.push(node);
    }
    setCondition(condition) {
        this.condition = condition;
    }
    removeChild(node) {
        const index = this.children.indexOf(node);
        if (index > -1) {
            this.children.splice(index, 1);
        }
    }
    setParent(parent) {
        this.parent = parent;
    }
}
class TreeRule extends TreeNode {
    parent = null;
    id = null;
    constructor() {
        super();
        this.id = Math.random().toString(36).substring(7);
    }
    setParent(parent) {
        this.parent = parent;
    }
}

Dynami c вставка html шаблона

let root = new TreeGroup();
root.id = "root";
createGroupTemplate(root);

function createGroupTemplate(parent) {
    let group = new TreeGroup();
    group.setParent(parent);
    parent.addChild(group);
    let s = ' <div class="group" id="' + group.id + '">' +

        '<div class="btn-group">' +
        '<button type="button" class="btn btn-primary">AND</button>' +
        '<button type="button" class="btn btn-primary">OR</button>' +
        '</div>' +
        '<div class="btn-group float-right">' +
        '<button type="button" class="btn btn-success" onclick="createGroupTemplate(' + group + ')">Add Group</button>' +
        '<button type="button" class="btn btn-success" onclick = "createRuleTemplate("' + group + '")">Add Rule</button>' +
        '</div>' +
        '</div>';
    $('#' + parent.id).append(s);
}
function createRuleTemplate(parent) {
    let rule = new TreeRule();
    rule.setParent(parent);
    return '<div class="row">' +
        '<div class="col-sm">' +
        '<select class="form-control">' +
        '<option>Price</option>' +
        '<option>Name</option>' +
        '<option>Category</option>' +
        '</select>' +
        '</div>' +
        '<div class="col-sm">' +
        '<select class="form-control" >' +
        '<option>equal</option>' +
        '<option>not equal</option>' +
        '<option>greater than</option>' +
        '<option>lesser than</option>' +
        '</select>' +
        '</div>' +
        '<div class="col-sm">' +
        ' <input type="text" class="form-control">' +
        '</div>' +
        '</div>';
}

Я не уверен, что это самый эффективный способ решить эту задачу. Есть ли лучший способ создать эти html шаблоны и сохранить их в виде дерева, а также в чем проблема с идентификатором?