select2 mulit tags duplicate

by nsdont

HTML

<link rel="stylesheet" href="//cdn.bootcss.com/select2/4.0.0/css/select2.min.css">
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/select2/4.0.0/js/select2.min.js"></script>
<select class="js-states js-example-events form-control" multiple="multiple">
  <option>red</option>
    <option>green</option>

</select>


  <div class="s2-event-log">
    <ul class="js-event-log"></ul>
  </div>

JavaScript

var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");

$.fn.select2.defaults.set("width", "50%");

$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("change", function (e) { log("change"); });

$eventSelect.on("select2:select", function (e) { 
	log("select2:select", e);
  $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});
$eventSelect.on("select2:unselect", function (e) { 
	log("select2:unselect", e); 
 	e.params.data.element.remove();
});

function log (name, evt) {
  if (!evt) {
    var args = "{}";
  } else {
    var args = JSON.stringify(evt.params, function (key, value) {
      if (value && value.nodeName) return "[DOM node]";
      if (value instanceof $.Event) return "[$.Event]";
      return value;
    });
  }
  var $e = $("<li>" + name + " -> " + args + "</li>");
  $eventLog.append($e);
  $e.animate({ opacity: 1 }, 50000, 'linear', function () {
    $e.animate({ opacity: 0 }, 2000, 'linear', function () {
      $e.remove();
    });
  });
}

function formatResultData (data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

$eventSelect.select2({
  templateResult: formatResultData,
  tags: true}
);