JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<div class="form-group row">
  <label class="col-sm-2 form-control-label">Country of operation</label>
  <div class="col-sm-10">
    <select class="form-control" multiple="multiple" data-json="false" id="country-of-operation-edit">
    </select>
  </div>
</div>

JavaScript

(function($) {
  $.fn.DualListBox = function(paramOptions, selected) {
    return this.each(function() {
      var defaults = {
        element: $(this).context,
        uri: "local.json",
        value: "id",
        text: "name",
        title: "Example",
        json: true,
        timeout: 500,
        horizontal: false,
        textLength: 45,
        moveAllBtn: true,
        maxAllBtn: 500,
        selectClass: "form-control",
        warning: "Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive."
      };
      var htmlOptions = {
        element: $(this).context,
        uri: $(this).data("source"),
        value: $(this).data("value"),
        text: $(this).data("text"),
        title: $(this).data("title"),
        json: $(this).data("json"),
        timeout: $(this).data("timeout"),
        horizontal: $(this).data("horizontal"),
        textLength: $(this).data("textLength"),
        moveAllBtn: $(this).data("moveAllBtn"),
        maxAllBtn: $(this).data("maxAllBtn"),
        selectClass: $(this).data("selectClass")
      };
      var options = $.extend({}, defaults, htmlOptions, paramOptions);
      $.each(options, function(i, item) {
        if (item === undefined || item === null) {
          throw "DualListBox: " + i + " is undefined."
        }
      });
      options["parent"] = "dual-list-box-" + options.title;
      options["parentElement"] = "#" + options.parent;
      selected = $.extend([{}], selected);
      if (options.json) {
        addElementsViaJSON(options, selected)
      } else {
        construct(options)
      }
    })
  };

  function addElementsViaJSON(options, selected) {
    var multipleTextFields = false;
    if (options.text.indexOf(":") > -1) {
      var textToUse = options.text.split(":");
      if (textToUse.length > 1) {
        multipleTextFields = true
      }
    }
    $.getJSON(options.uri, function(json) {
      $.each(json, function(key, item) {
        var text =...