JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/poolerMF/bootstrap-multiselectsplitter/master/bootstrap-multiselectsplitter.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12" style="padding-top:10px;">
            <h4>EXAMPLE1:</h4>
            Simple select, no multiple
            <select id="example1">
              <optgroup label="Category 1">
                <option value="1">Choice 1</option>
                <option value="2">Choice 2</option>
                <option value="3">Choice 3</option>
                <option value="4">Choice 4</option>
              </optgroup>
              <optgroup label="Category 2">
                <option value="5">Choice 5</option>
                <option value="6">Choice 6</option>
                <option value="7">Choice 7</option>
                <option value="8">Choice 8</option>
              </optgroup>
              <optgroup label="Category 3">
                <option value="9">Choice 9</option>
                <option value="10">Choice 10</option>
                <option value="11">Choice 11</option>
                <option value="12">Choice 12</option>
              </optgroup>
            </select>
        </div>
        <div class="col-xs-12" style="padding-top:10px;">
            <h4>EXAMPLE2:</h4>
            Multiple select of size 7 with group counter. Second select is cleared, when first changed.
            <select id="example2" multiple="multiple">
              <optgroup label="Category 1">
                <option value="1">Choice 1</option>
                <option value="2" selected="selected">Choice 2</option>
                <option value="3">Choice 3</option>
                <option value="4">Choice 4</option>
              </optgroup>
              <optgroup label="Category 2">
                <option value="5">Choice 5</option>
                <option value="6">Choice...

JavaScript

$(function () {
		$('#example1').multiselectsplitter();
    
		$('#example2').multiselectsplitter({
    		selectSize: 7,
        clearOnFirstChange: true,
    		groupCounter: true
    });
    
		$('#example3').multiselectsplitter({
    		groupCounter: true,
        maximumSelected: 2
    });
    
		$('#example4').multiselectsplitter({
    		groupCounter: true,
        maximumSelected: 3,
        onlySameGroup: true
    });
    
		$('#example5').multiselectsplitter({
        size: 6,
    		groupCounter: true,
        maximumSelected: 2,
        maximumAlert: function(maximumSelected) {
        		alert('You choose '+( maximumSelected + 1 )+ ' options. Are you crazy ?');
        },
        afterInitialize: function($firstSelect, $secondSelect) {
        		$("body").append('This text was edded after initialization of example5');
        },
        createFirstSelect: function (label, $originalSelect) { 
        		return '<option class="text-success">prefix - ' + label + '</option>';
        },
        createSecondSelect: function (label, $firstSelect) { 
        		return '<option class="text-danger"> ??? </option>';
        }
    });
});