Filter behavior

by myrluk3

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="filters">

  <div class="dropdown ol-add">
    <button class="btn btn-primary btn-sm" data-toggle="dropdown" aria-expanded="false" title="Add filter">
      +
    </button>
    <ul class="dropdown-menu">
      <li><a id="training">Training Session</a></li>
      <li><a id="gender">Gender</a></li>
      <li><a id="martial">Martial Status</a></li>
      <li><a id="legal">Legal Status</a></li>
    </ul>
  </div>

</div>
<hr>

CSS

.filters {
  padding: 20px 20px 0 20px;
}

.filters > .btn-group {
  margin-right: 5px !important;
}

.btn-group .btn.ol-remove-btn {
  float: none;
  margin-left: 0px;
  line-height: 1.1;
  padding: 3px 7px 3px 7px;
}

.btn-group .ol-filter .btn {
  line-height: 1.1;
  padding: 3px 7px 3px 7px;
}

.ol-add {
  display: inline-block;
}

.ol-add .btn {
  line-height: 1.2;
  padding: 3px 7px 3px 7px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  width: 90%;
}

JavaScript

var filters = {
  training: '<div class="btn-group"><div class="btn-group bootstrap-select show-tick ol-filter fit-width"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Training Session"><span class="filter-option pull-left">Training Session</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2011-2012</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2012-2013</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2013-2014</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div><select class="selectpicker ol-filter" multiple="" data-selected-text-format="count > 1" title="Training Session" data-width="fit" tabindex="-98"><option>2011-2012</option><option>2012-2013</option<option>2013-2014</option></select></div><button class="btn btn-danger ol-remove-btn" type="button" title="Remove filter" flt="training">x</button></div>',
  gender: '<div class="btn-group"><div class="btn-group bootstrap-select show-tick ol-filter fit-width"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Gender"><span class="filter-option pull-left">Gender</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Female</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style=""...