JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<html>

  <body>
    <div id="wrapper">
      <select id="sel" multiple="multiple" name="users[]">
      </select>
      <br><br><br><br>
      <button type="button" id="btn">
        Click Me
      </button>
    </div>
  </body>

</html>

CSS

body {
  width: 100%;
}
#wrapper {
  width: 100%;
}

JavaScript

$(document).ready(function() {
  $('#sel').select2({
    ajax: {
      url: 'https://jsonplaceholder.typicode.com/users',
      data: function(params) {
        var query = {
          str_search: params.term
        }
        return query;
      },
      //data: null,  
      processResults: function(data, params) {
        //console.log(data);
        return {
          results: data,
          pagination: {
            more: false
          }
        };
      },
      cache: true,
      dataType: 'json',
      delay: 250
    },
    templateResult: format_list,
    templateSelection: format_selection,
    width: '80%',
    minimumInputLength: 1,
    closeOnSelect: false,
    allowClear: false,
    placeholder: "-- Search for users --"
  });

  $("select #rvwr").on("select2:unselect", function(evt) {
    if (!evt.params.originalEvent) {
      return;
    }
    evt.params.originalEvent.stopPropagation();
  });

  $('#btn').on('click', function() {
    $.ajax({
        type: 'GET',
        url: 'https://jsonplaceholder.typicode.com/users/1'
      })
      .then(function(data) {
        console.log(data)
        // create the option and append to Select2
        var option = new Option(data.name, data.id, true, true);
        $('#sel').append(option).trigger('change');

        // manually trigger the `select2:select` event
        $('#sel').trigger({
          type: 'select2:select',
          params: {
            data: data
          }
        });
      }); //then
  }); //click
}); //doc ready

function format_list(repo) {
  if (repo.loading) {
    return repo.text;
  }

  var $container = $(
    `<div class='select2-result-repository clearfix'>
						<div class='select2-result-repository__name'>
							<b>${repo.name}</b>
							- ${repo.email}  
						</div>
						
					</div>`
  );
  return $container;
}

function format_selection(obj) {
  return $(`<div><b>${obj.name}</b></div><div>(${obj.email})</div>`);
}