JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-dt/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-bs/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/editor/css/editor.bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/select2/dist/css/select2.css">
<script src="https://webinsert.pl/bug_test/lib/jQuery/dist/jquery.min.js"></script>
<script src="https://webinsert.pl/bug_test/lib/jquery-ui/jquery-ui.js"></script>
<script src="https://webinsert.pl/bug_test/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net/js/jquery.dataTables.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-keytable/js/dataTables.keyTable.js"></script>
<script src="https://webinsert.pl/bug_test/lib/editor/js/dataTables.editor.js"></script>
<script src="https://webinsert.pl/bug_test/lib/editor/js/editor.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/select2/dist/js/select2.full.js"></script>
<div class="container">
    <h1>Editor and select2</h1>


    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th></th>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Offices</th>

        </tr>
        </thead>
    </table>


</div>

JavaScript

var ajax_data = {
  "data": [
    {
      "DT_RowId": "1",
      "first_name": "Tiger",
      "last_name": "Nixon",
      "position": "System Architect",
      "offices": [
        {
          "id": 1,
          "label": "Tokyo"
        }
      ]
    },
    {
      "DT_RowId": "2",
      "first_name": "Cedric",
      "last_name": "Kelly",
      "position": "Senior Javascript Developer",
      "offices": [
        {
          "id": 1,
          "label": "Tokyo"
        },
        {
          "id": 2,
          "label": "London"
        }
      ]
    },
    {
      "DT_RowId": "3",
      "first_name": "Ashton",
      "last_name": "Cox",
      "position": "Junior Technical Author",
      "offices": [
        {
          "id": 1,
          "label": "Tokyo"
        },
        {
          "id": 2,
          "label": "London"
        }
      ]
    }
  ]
};


        
        
        var editor; 
        $(document).ready(function () {
            (function (factory) {
                if (typeof define === 'function' && define.amd) {
                    // AMD
                    define(['jquery', 'datatables', 'datatables-editor'], factory);
                }
                else if (typeof exports === 'object') {
                    // Node / CommonJS
                    module.exports = function ($, dt) {
                        if (!$) {
                            $ = require('jquery');
                        }
                        factory($, dt || $.fn.dataTable || require('datatables'));
                    };
                }
                else if (jQuery) {
                    // Browser standard
                    factory(jQuery, jQuery.fn.dataTable);
                }
            }(function ($, DataTable) {
                'use strict';


                if (!DataTable.ext.editorFields) {
                    DataTable.ext.editorFields = {};
                }

                var _fieldTypes = DataTable.Editor ?
                   ...