How to use jquery-querybuilder - 2 common examples

import 'daterangepicker';

import $ from 'jquery';
import Component from '@ember/component';
import I18n from 'i18n-js';
import QueryBuilder from 'jQuery-QueryBuilder';
import forEach from 'lodash-es/forEach';
import { inject } from '@ember/service';
import moment from 'moment-timezone';
// eslint-disable-next-line ember/no-observers
import { observer } from '@ember/object';

QueryBuilder.define('filter-description', function() {
  this.on('afterUpdateRuleFilter afterUpdateRuleOperator', function(e, rule) {
    let $b = rule.$el.find('button.filter-description');
    const description = e.builder.getFilterDescription(rule.filter, rule);

    if(!description) {
      $b.hide();
    } else {
      if($b.length === 0) {
        $b = $('<button class="btn btn-sm btn-info filter-description btn-tooltip tooltip-trigger" type="button"><i class="fas fa-question-circle"></i></button>');
        $b.prependTo(rule.$el.find(QueryBuilder.selectors.rule_actions));
      } else {
        $b.css('display', '');
      }

      $b.attr('data-tippy-content', description);
    }

this.on('afterUpdateRuleFilter afterUpdateRuleOperator', function(e, rule) {
    let $b = rule.$el.find('button.filter-description');
    const description = e.builder.getFilterDescription(rule.filter, rule);

    if(!description) {
      $b.hide();
    } else {
      if($b.length === 0) {
        $b = $('<button class="btn btn-sm btn-info filter-description btn-tooltip tooltip-trigger" type="button"><i class="fas fa-question-circle"></i></button>');
        $b.prependTo(rule.$el.find(QueryBuilder.selectors.rule_actions));
      } else {
        $b.css('display', '');
      }

      $b.attr('data-tippy-content', description);
    }
  });
});