title: move select2 value to other div
body: <p><a href="https://i.stack.imgur.com/O8ads.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O8ads.png" alt="enter image description here"></a></p>
  
  <p>im using select2.
  i need to move the value of selected select2 to another div
  like the image
  i code like this</p>
  
  <pre><code>    &lt;div class="option"&gt;
      &lt;select id="position" style="width: 100%"&gt;
      &lt;option&gt;One&lt;/option&gt;
      &lt;option&gt;Two&lt;/option&gt;
      &lt;option&gt;Three&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="result"&gt;
      ....//the result will be here
      &lt;/div
  &lt;script&gt;
      $("#position").select2({
      allowClear:true,
      placeholder: 'Position'
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>normally if we chose the option. it went inside the button with close icon to remove what we choose. i need the value and close icon to be move to class result. how to do that? because like in the image. D-3 is the value what we choose in degree. and on the right of d-3, it have a close button that can close the result of what we chose in degree option. same like select2. can u guys teach me how to move that to inside class result? </p>