How can I control the select2 select box from an external list box?
<p>I am working with the <code>select2</code> multiple select box. I want to display the result of my selection in an external list. From this list I also want to be able to remove the items again. It is working more or less but is getting kind of buggy after removing some items from the external list and insert it again via the select box. I visualized everything here to illustrate my problem : </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  //Initialize Select2 Elements
  $(".select2").select2();
});

$(document).ready(function () {

  $(".select2").on("change", function () {
    $(".select2-selection__rendered li").each(function () {
      var title = $(this).attr('title');
      if (typeof title !== typeof undefined &amp;&amp; title !== false) {
        var animal = title.replace(/ /g, "");
        $('#' + animal).show();
      }
    });
  });


  $(".remove").click(function () {
    $(this).closest(".animals").hide();
    var className = $($(this).closest("li")).attr('id');
    $(".select2-selection__rendered li[title='" + className + "']").remove();
  });

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.remove{cursor:pointer}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/&gt;
&lt;link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://select2.github.io/vendor/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="https://select2.github.io/dist/js/select2.full.js"&gt;&lt;/script&gt;

&lt;div class="form-group"&gt;
  &lt;select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;"&gt;
    &lt;option&gt;Cat&lt;/option&gt;
    &lt;option&gt;Dog&lt;/option&gt;
    &lt;option&gt;Bird&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;ul&gt;
  &lt;li class="animals" id="Cat" style="display:none"&gt;Cat &lt;a class="remove"&gt;x&lt;/a&gt;&lt;/li&gt;
  &lt;li class="animals" id="Dog" style="display:none"&gt;Dog &lt;a class="remove"&gt;x&lt;/a&gt;&lt;/li&gt;
  &lt;li class="animals" id="Bird" style="display:none"&gt;Bird &lt;a class="remove"&gt;x&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>