Select2: Images in options

data must be supplied as data: <JSON data with id, text and img> in real cases

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<link rel="stylesheet" href="https://rawcdn.githack.com/berkanakyurek/select2-bootstrap4-theme/19dc18c46c67df64b12c2e7dffda8bfff06df8be/dist/select2-bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="container-fluid">

<select id="username" name="username" class="form-control">
  <option></option>
</select>



<input id="firstname" class="form-control">
<input id="lastname" class="form-control">
<input id="email" class="form-control">
</div>

CSS

.select2-selection__clear {
    position: absolute !important;
    right: 30px !important;
}

JavaScript

$.fn.select2.defaults.set("theme", "bootstrap4");

var firstEmptySelect = true; // Indicate header was create

        function s2FormatResult(item) {

            if (!item.id) {
                // trigger when remote query
                firstEmptySelect = true; // reset
                return item.text;
            }

            var $container; // This is custom templete container.

            // Create header
            if (firstEmptySelect) {

                firstEmptySelect = false;

                $container = $(
                    '<div class="row">' +
                    '<div class="col-sm-2"><b>Username</b></div>' +
                    '<div class="col-sm-2"><b>Firstname</b></div>' +
                    '<div class="col-sm-2"><b>Lastname</b></div>' +
                    '<div class="col-sm-2"><b>Email</b></div>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-sm-2">' + item.username + '</div>' +
                    '<div class="col-sm-2">' + item.firstname + '</div>' +
                    '<div class="col-sm-2">' + item.lastname + '</div>' +
                    '<div class="col-sm-2">' + item.mail + '</div>' +
                    '</div>'
                );

            }
            else {
                $container = $('<div class="row">' +
                    '<div class="col-sm-2">' + item.username + '</div>' +
                    '<div class="col-sm-2">' + item.firstname + '</div>' +
                    '<div class="col-sm-2">' + item.lastname + '</div>' +
                    '<div class="col-sm-2">' + item.mail + '</div>' +
                    '</div>');
            }


          return $container
        }

	var myData = [
		{
      "id": 1,
      "username": "123456",
      "firstname": "Andreas",
      "lastname": "Kreuz",
      "mail": "[email protected]"
    },
    {
      "id": 2,
      "username": "999444",
      "firstname": "Tobias",
      "lastname": "Berger",
     ...