JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
 <select id="dynamicAttributes" style="display:none" multiple="multiple">
					         <option value="internal_notes_container">Internal Notes</option>
					         <option value="event_attributes_container">Event Attributes</option>
					         <option value="sell_attributes_container">Sell Attributes</option>
					         <option value="buyer_alert_message_container">Buyer Alert Message</option>
					         <option value="buyer_info_message_container">Buyer Info Message</option>
					         <option value="seller_alert_message_container">Seller Alert Message</option>
					         <option value="seller_info_message_container">Seller Info Message</option>
					      </select>

CSS

.select2-results__option[aria-selected=true] {
    display: none;
}

/* line 1, ../scss/core.scss */

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}
/* line 1, ../scss/_single.scss */
.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 38px;
  user-select: none;
  -webkit-user-select: none;
}
/* line 12, ../scss/_single.scss */
.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* line 25, ../scss/_single.scss */
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}
/* line 1, ../scss/_multiple.scss */
.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}
/* line 12, ../scss/_multiple.scss */
.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline-block;
  overflow: hidden;
  padding-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* line 21, ../scss/_multiple.scss */
.select2-container .select2-search--inline {
  float: left;
}
/* line 24, ../scss/_multiple.scss */
.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 3px;
  margin-left: 3px;
}
/* line 31, ../scss/_multiple.scss */
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* line 1, ../scss/_dropdown.scss */
.select2-dropdown {
  background-color: white;
  border: 1px solid #DDD;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
...

JavaScript

$(document).ready(function(){
    
    $('#dynamicAttributes').select2({
        allowClear: true,
        minimumResultsForSearch: -1,
        width: 500
    });
             
    $("select").on("select2:select", function(evt) {
        var element = evt.params.data.element;
        var $element = $(element);
        debugger
        //$element.detach();
        $(this).append($element);
        $(this).trigger("change");
    });

});