Select box's odd behavior on doing add items from another select
<p>I am facing a strange behavior on select box after adding some items into it. In my code snippet below, if I click on Insert options, items in select becomes non selectable or disabled. 
I am using IE11 browser, but this is working fine in Chrome.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;form&gt;
  &lt;select id="mySelect" size="8"&gt;
    &lt;option&gt;Apple&lt;/option&gt;
    &lt;option&gt;Pear&lt;/option&gt;
    &lt;option&gt;Banana&lt;/option&gt;
    &lt;option&gt;Orange&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;br&gt;

&lt;p&gt;Click the button to add a "Kiwi" option at the end of the dropdown list.&lt;/p&gt;

&lt;button type="button" onclick="myFunction()"&gt;Insert option&lt;/button&gt;

&lt;script&gt;
function myFunction() {
    var x = document.getElementById("mySelect").options;
    x[3].text=x[2].text
    x[3].value=x[2].value
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>