JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<select style="width: 80%;" class="js-example-basic-multiple" name="states[]" multiple="multiple">
  
</select>

CSS

.select2-dropdown--below{
  display: none;  
}


.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

JavaScript

var data = ["a", "c"];

//יצירה עם התגיות a+c
$('.js-example-basic-multiple').select2({tags: true,
tokenSeparators: [',', ' '], data: data});

//הוספת איבר g
$(".js-example-basic-multiple").append("<option>g</option>");
$(".js-example-basic-multiple").trigger('change');


//קביעה מה יהיו האיברים הבחורים כעת
$(".js-example-basic-multiple").val(["a", "c"]);
$(".js-example-basic-multiple").trigger('change');