JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.5.2/select2.css">
<script src="http://cdn.jsdelivr.net/select2/3.5.2/select2.min.js"></script>
<input id="sel2" style="width:300px" type="hidden" value=""/>

<input type="text" id="s53f3afdf79040_status_title" name="s53f3afdf79040[status][title]" required="required"    class="span5 form-control"  value="ENABLED" />

<div id="s53f3afdf79040_status_identifiers" data-prototype="&lt;input type=&quot;hidden&quot; id=&quot;s53f3afdf79040_status_identifiers___name__&quot; name=&quot;s53f3afdf79040[status][identifiers][__name__]&quot;    class=&quot; form-control&quot;  /&gt;
" >
 
<input type="hidden" id="s53f3afdf79040_status_identifiers_0" name="s53f3afdf79040[status][identifiers][0]"    class=" form-control"  value="103" />
    <br>
    <input type="button" id="test_button" value="Click to set value" />

JavaScript

(function ($) {
  var autocompleteInput = $("#s53f3afdf79040_status_title");
    $('#test_button').on('click', function() {
        console.log(autocompleteInput.select2('data'));
        autocompleteInput.select2('data', {id:1, label:'NEW VALUE'}).trigger('change');
        return false;
    });
  autocompleteInput.select2({
    placeholder: "",
    allowClear: false,
    enable: true,
    readonly: false,
    minimumInputLength: 3,
    multiple: false,
    ajax: {
      url:  "http://example.com/admin/core/get-autocomplete-items",
      dataType: 'json',
      quietMillis: 100,
      data: function (term, page) {
        // page is the one-based page number tracked by Select2
        return {
            //search term
            "q": term,

            // page size
            "_per_page": 10,

            // page number
            "_page": page,

            // admin
            'uniqid': "s53f3afdf79040",
            'code':   "abc.example_admin",
            'field':  "status"

            // other parameters
        };
      },
      results: function (data, page) {
        // notice we return the value of more so Select2 knows if more results can be loaded
        return {results: data.items, more: data.more};
      }
    },
    formatResult: function (item) {
      return '<div class="sonata-autocomplete-dropdown-item">'+item.label+'</div>';// format of one dropdown item
    },
    formatSelection: function (item) {
      return item.label;// format selected item '<b>'+item.label+'</b>';
    },
    dropdownCssClass: "sonata-autocomplete-dropdown",
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
  });

  autocompleteInput.on("change", function(e) {

    // console.log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed}));

    // add new input
    var el = null;
    if (undefined !== e.added) {

      var addedItems = e.added;

      if(!$.isArray(addedItems)) {
  ...