JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.8.2/umd/popper.js"></script>
<link rel="stylesheet" href="ttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.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://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">
<body>
<div class="firstSelectContainer">
  <select multiple="multiple" id="myList" style="width:280px">
        <option value="1" >Apple</option>
        <option value="2" >Mango</option>
        <option value="3">Orange</option>
  </select>
	</div>
<div class="secondSelectContainer">
  <select multiple="multiple" id="myList2" style="width:280px">
        <option value="1" >Rice</option>
        <option value="2" >Beans</option>
        <option value="3">Beef</option>
  </select>
	</div>
</body>

JavaScript

$(document).ready(function() {
  var checkList = [1, 3]; 
		$("#myList").select2().val(checkList).trigger("change");		        $("#myList2").select2().val(checkList).trigger("change");

  $("#myList").change(function() {
    var colors = ["red", "blue", "green", "cyan", "orange"];    
 
    var selections = $(".firstSelectContainer").find(".select2-selection__choice");    
		debugger;
		
    if (selections.length) {
      for (var i = 0; i < selections.length; i++) {
        var selection = selections[i];
        var selectionJQ = $(selection);
        selectionJQ.attr("style", "background: " + colors[i] + " !important");
      }			
    }		
  });
	
	  $("#myList2").change(function() {
		var colors2 = ["aliceblue", "purple", "pink", "white", "gray"]; 
    var selections = $(".secondSelectContainer").find(".select2-selection__choice");    
		
    if (selections.length) {
      for (var i = 0; i < selections.length; i++) {
        var selection = selections[i];
        var selectionJQ = $(selection);
        selectionJQ.attr("style", "background: " + colors2[i] + " !important");
      }			
    }		
  });
});