JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<input id="uppercase" type="button" value="UPPERCASE"/>
<input id="lowercase" type="button" value="LOWERCASE"/>
<br/>
<input id="selectpill" type="hidden" value="">

JavaScript

var pills = [{id:0, text: "red"}, {id:1, text: "blue"}]; 

$('#selectpill').select2({
    placeholder: "Select a pill",
    data: function() { return {results: pills}; }
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
});
$('#lowercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toLowerCase();
    }); 
});