filterable.erb

<template id="filter-input">
  <div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-append">
      <button class="btn filter-widget-remove"><i class="fas fa-times"></i></button>
    </div>
  </div>
</template>

<div class="filter-rules-container">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="fas fa-filter"></i>
      <span class="filter-rule-kind"></span>
      <i class="fas fa-plus"></i>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item filter-rules-plus" href="#include">include</a>
      <a class="dropdown-item filter-rules-plus" href="#exclude">exclude</a>
    </div>
  </div>
  <div class="filter-rules"></div>
</div>

<template id="filter-rule-template">
  <div class="filter-rule">
    <button class="btn filter-button-plus">
      <i class="fas fa-filter"></i>
      <span class="filter-rule-kind"></span>
      <i class="fas fa-plus"></i>
    </button>
  </div>
</template>

<template id="filter-pill-template">
  <div class="input-group filter-pill">
    <input type="text" class="form-control">
    <div class="input-group-append">
      <button class="btn filter-pill-remove"><i class="fas fa-times"></i></button>
    </div>
  </div>
</template>