JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<select class="js-example-tokenizer form-control select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
          <option value="red">red</option>
          <option value="blue">blue</option>
          <option value="green">green</option>
</select>
<button>Update</button>

CSS

.select2,.select2-selection{
    width:100% !important
}

JavaScript

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 
$(".js-example-tokenizer").select2({
  tags: true,
  tokenSeparators: [',', ' ']
})

$('button').click(function(){
    $("select option[value='red']").prop('selected',false).trigger('change').remove();
    console.log($("select option[value='red']"));
});