JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
Single select example
    <div>
        <select id="singleSelectExample" multiple style="width: 300px;">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
    
        <div>
        <select id="singleSelectExample2" multiple style="width: 300px;">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>

JavaScript

$("#singleSelectExample").select2({
  closeOnSelect: false
});

$("#singleSelectExample2").select2();

$('#singleSelectExample').on('change', function() {
  var selected = $(this).val().length; 
  var of = $(this).find('option').length;
  $(this).parent().find('.select2 .select2-selection ul').html('Selected ' + selected + ' of ' + of + '  items.')
});