select2 tags colored ny id

by beaver71

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
  <select multiple="multiple" id="myList">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
  </select>
</div>

CSS

.select2-selection__choice {
  color: white;
}

JavaScript

var colors = ["red", "blue", "green", "orange", "yellow"];

$(document).ready(function() {
  var checkList = [1, 3];
  $("#myList").select2({
  	width: "100%",
    templateSelection: function (data, container) {
      console.log(">>Selection",data);
      $(container).css("background-color", colors[data.id]);
      return data.text;
    },
  }).val(checkList).trigger("change");
  console.log(document.getElementById("myList"));
})