JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/ivaynberg/select2/75e089f3a105771353f940f721404d891c2e2459/select2.css">
<script src="https://rawgit.com/ivaynberg/select2/75e089f3a105771353f940f721404d891c2e2459/select2.js"></script>
<input type="hidden" class="tag" style="width:300px" value="red" />

CSS

.used-number {
    width: 25px;
    float: right;
    border: 1px solid #000;
    text-align: center;
}
.select2-highlighted .used-number {
    border-color: #fff;
}

JavaScript

$(".tag").select2({
    tags:[
        {id: "red", text: "red", qt: 3},
        {id: "green", text: "green", qt: 12},
        {id: "blue", text: "blue", qt: 5},
        {id: "black", text: "black", qt: 7}
    ],
    formatResult: function(result) {
        if (result.qt === undefined) {
            return result.text;
        }

        return result.text
				+ "<span class='used-number'>"
				+ result.qt
				+ "</span>";
    }
});