Select2 problem

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="row disclosure_section" name="data_section" data-class-name="RIS_ApplicationAccess" data-request-id="1">
  <div class="" name="first_line">
    

<div class="col-sm-3 well-mini" data-request="1" data-request-group="1">
    Add<input type="hidden" name="acr" value="Add"/>
</div>


<div class="col-sm-5">
  <select name="category" class="form-control" required="required">
  	<option value="">Category</option>
    
  	<option value="basket">Template</option>
    
    
  	<option value="15"
    	rel="popover"
    	data-content="OneStop"
    	data-html="true"
 	 
  	>OneStop</option>
    
  	<option value="32"
    	rel="popover"
    	data-content="CDP"
    	data-html="true"
 	 
  	>Core Delivery Partner</option>
    
  	<option value="11"
    	rel="popover"
    	data-content="Data and Informatics"
    	data-html="true"
 	 
  	>Data and Informatics</option>
    
  	<option value="3"
    	rel="popover"
    	data-content="Database Access"
    	data-html="true"
 	 
  	>Database</option>
    
  	<option value="29"
    	rel="popover"
    	data-content="External Applications"
    	data-html="true"
 	 
  	>External Applications</option>
    
  	<option value="6"
    	rel="popover"
    	data-content="Facets Access"
    	data-html="true"
 	 
  	>Facets</option>
    
  	<option value="31"
    	rel="popover"
    	data-content="IT Tools"
    	data-html="true"
 	 
  	>IT Tools</option>
    
  	<option value="10"
    	rel="popover"
    	data-content="MainFrame access"
    	data-html="true"
 	 
  	>MainFrame</option>
    
  	<option value="27"
    	rel="popover"
   ...

CSS

.full-width {
  width: 100%;
}


.full-width {  width: 100%;}

JavaScript

$('body').find('select:visible').each(function() {
    	var cache;
    	cache = [];
    	$(this).children().each(function(i, e) {
      	var e_children, elem;
      	if (i > 0) {
        	elem = {
          	id: $(e).val(),
          	description: $(e).data('content'),
          	display_name: e.text
        	};
        	if (e instanceof HTMLOptGroupElement) {
          	elem.display_name = e.label;
          	e_children = [];
          	$(e).children().each(function(ie, ee) {
            	return e_children.push({
              	id: $(ee).val(),
              	description: $(ee).data('content'),
              	display_name: ee.text
            	});
          	});
          	elem.children = e_children;
        	}
        	return cache.push(elem);
      	}
    	});
    	return $(this).data('cache', cache);
  	}).select2({
    	data:  [{
            	id: '',
              text: 'Column'
            },
            {
                id: 'A & A, LLC.', text: 'A & A, LLC.'
            },{
                id: 'testing1', text: 'testing1'
            },{
                id: 'testing 1,2,3', text: 'testing 1,2,3'
      }],
    	escapeMarkup: function(markup) {
      	return markup;
    	},
    	minimumInputLength: 0,
    	theme: 'classic',
    	templateResult: function(data) {
      	var ret, text;
      	text = data.display_name || data.name || data.text;
      	ret = $("<span class=\"full-width\" >" + text + "</span>");
      	if (data.description) {
        	ret.popover({
          	trigger: 'hover',
          	container: 'body',
          	html: true,
          	content: data.description,
          	title: data.title || '',
          	placement: data.placement || 'auto right'
        	});
      	}
      	return ret;
    	}
  	});
    
$('body').find('[rel="popover"]').popover({
	trigger: 'hover', 
  container: 'body'
 });