JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select2">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
  <option value="5">five</option>
</select>

JavaScript

$('select2').select2();

$('select').select2().on('select2:unselect', function(e) {

$('select').on("select2:unselect", function(e){

  console.log(e.params.args.data.id);
  console.log(e.params.args.data.text);
  // what value is currently being selected?
  // $(this).val() does not yet have it and I should set it conditionally
})