Select 2 with Boostrap 4

by kwabs Ohh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<div>
<select id="selDsh" class="select2">
</select>
<select id="selKPI" class="select2">

</select>
<select id="selMnt" class="select2">
 <option value = 0> Month 1</option>
  <option value = 1> Month 2</option>
   <option value = 2> Month 3</option>
</select>
</div>
<div>
<button id="" class="btn btn-default btn-circle-sm cntrl selDsh prev">
PREV DSH
</button>
<button id="sel" class="btn btn-default btn-circle-sm cntrl selDsh next">
NEXT DSH
</button>
</div>
<div>
<button id="" class="btn btn-default btn-circle-sm cntrl selKPI prev">
PREV KPI
</button>
<button id="" class="btn btn-default btn-circle-sm cntrl selKPI next">
NEXT KPI
</button>
</div>
<div>
<button id="" class="btn btn-default btn-circle-sm cntrl selMnt prev">
PREV MONTH
</button>
<button id="" class="btn btn-default btn-circle-sm cntrl selMnt next">
NEXT MONTH
</button>
</div>
<div class="row">
<div id="small" class=" col-xs-6 boxTitle">Put Small Hier</div>
<div id="big" class="  col-xs-6 boxTitle">Put Big Here</div>
</div>
<table id="tbl" class="table table-stripped">
</table>

CSS

body {
  font-size: 90%;
}
.boxTitle{
height:37px;
border-radius: 5px 5px 0 0;
border:solid 1px #ddd;
background-color:#fff;
padding: 5px 10px;
font-size:12px;
font-weight:bold;
margin-bottom:0;
}

.badge-holder{
width:10%;
float:left;
font-size:18px;
}

.text-holder{
width:90%;
text-align:center;
color: #666;
padding-top: 5px;
}

.label-as-badge {
    border-radius: 1em;
}

.tdRK{
width:6%;
}

.tdRKDescr{
width:22%;
}
.tdMnthData{
width:6%;
}

JavaScript

// DEFINE SELECTS
var sel2 = $('.select2');
var selDsh = $('#selDsh');
var selKPI = $('#selKPI');
var selMnt = $('#selMnt');
var selectors = $('select'); 
var numOfSelects = selectors.length;
var str_colgroup ='<colgroup><col class="tdRK"><col class="tdRKDescr"><col class="tdMnthData" span="12"></colgroup>';

//Init Select2 
sel2.select2({
  width: '250px',
  placeholder: 'select',
})

/*###########################
	GLOBAL VARIABLES
##############################*/


var dashboardData = [{
  "id": -1,
  "text": "Select Dashboard",
  "dashb_kpis":[-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
},
{
  "id": 0,
  "text": "Germany_Business_Clients",
  "dashb_kpis": [-1,0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 1,
  "text": "Germany_Private_Clients",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
}, {
  "id": 2,
  "text": "Germany_Norisbank",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 3,
  "text": "Italy_Business_Products",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 4,
  "text": "Italy_Consumer_Finance",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12]
}, {
  "id": 5,
  "text": "Italy_Mortgages",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 19]
}, {
  "id": 6,
  "text": "Spain_DB_Credit",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 7,
  "text": "Spain_DB_SAE",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 8,
  "text": "PBC_Poland",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}, {
  "id": 9,
  "text": "PBC_Portugal",
  "dashb_kpis": [-1,0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}];

var kpiList =  [{
 		"id": -1,
 		"text": "Select KPI",
 		"subCatg": ["select KPI", "select KPI"],
 		"threshold": {
 			"amber": 5,
 			"red": 10
 		}
...