Tagging support implementation

I have included the following files in my framework (Yii2)

'canvas-theme\canvas-css\css\components\select-boxes.css',

'canvas-theme\canvas-js\js\jquery.js',
'canvas-theme\canvas-js\js\components\select-boxes.js',
'canvas-theme\canvas-js\js\components\selectsplitter.js',
'canvas-theme\canvas-js\js\can-function.js',

but the Tagging Support in http://themes.semicolonweb.com/html/canvas/component-select-box.php doesn't work proprely with the following code :

					<div class="site-index">
							<div class="bottommargin-sm">
								<label for="">Tagging Support</label>
								<select class="select-tags form-control select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
									<option selected="selected">orange</option>
									<option>white</option>
									<option selected="selected">purple</option>
									<option value="red">red</option>
									<option value="blue">blue</option>
									<option value="green">green</option>
								</select><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus select2-container--open" dir="ltr" style="width: 690px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-w2a5-results" aria-activedescendant="select2-w2a5-result-a825-orange"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
							</div>

Fixed it... If you encounter the same problem as I did :

Include this file this script :

jQuery(document).ready( function($){

			// Multiple Select
			$(".select-1").select2({
				placeholder: "Select Multiple Values"
			});

			// Loading array data
			var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
			$(".select-data-array").select2({
			  data: data
			})
			$(".select-data-array-selected").select2({
			  data: data
			});

			// Enabled/Disabled
			$(".select-disabled").select2();
			$(".select-enable").on("click", function () {
				$(".select-disabled").prop("disabled", false);
				$(".select-disabled-multi").prop("disabled", false);
			});
			$(".select-disable").on("click", function () {
				$(".select-disabled").prop("disabled", true);
				$(".select-disabled-multi").prop("disabled", true);
			});

			// Without Search
			$(".select-hide").select2({
				minimumResultsForSearch: Infinity
			});

			// select Tags
			$(".select-tags").select2({
				tags: true
			});

			// Select Splitter
			$('.selectsplitter').selectsplitter();

		});

And when you include the html tagging support implement it like this :

                            <form action="#" method="post" class="nobottommargin">
                              <div class="bottommargin-sm">
                                <label for="">Tagging Support</label>
                                <select class="select-tags form-control select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
                                    <option selected="selected">orange</option>
                                    <option>white</option>
                                    <option selected="selected">purple</option>
                                    <option value="red">red</option>
                                    <option value="blue">blue</option>
                                    <option value="green">green</option>
                                </select>
                            </div>
                          </form>