Moving entries from one select to another in javascript
<p>I have a textbox and two list boxes. </p>

<p>The first list box is populated from a database based on what is typed in the textbox. Items should move from one list box to the other depending on which button is pressed.</p>

<p>However at the moment once it does this, then both lists seem to get cleared. </p>

<p>Can anyone see why this is the case.</p>

<p>The following is the JavaScript</p>

<pre><code>$('#txtMRN').keyup(function () {
    var s = $('#txtMRN').val();
    var l = s.length;
    var lst = document.getElementById('lstMRN');


    if (l &gt; 4)
    {
        $.ajax({
            url: "http://localhost:52238/PatientsGetLike.ashx?MRN=" + s,
            success: function (result) {
                lst.innerHTML = '';
                $.each(result, function (i, v) {
                    var newOption = document.createElement('option');

                    newOption.text = v.nhs_patientid + ' - ' + v.nhs_surname + ', ' + v.nhs_firstname;
                    newOption.setAttribute('value', v.nhs_patientid);
                    newOption.className = 'mdl-list__item';

                    lst.add(newOption);

                });

                componentHandler.upgradeDom(lst);

            }
        });
    }
});

$('#btnSelect').click(function () {
    var el1 = document.getElementById('lstMRN');
    var el2 = document.getElementById('lstMRNSelected');

    $('#lstMRN :selected').each(function (i, selected) {
        var opt         = document.createElement('option');

        opt.value       = selected.value;
        opt.text        = selected.text;
        opt.className   = 'mdl-list__item';

        el2.add(opt);
        // selected.remove();
    });

});
</code></pre>

<p>and the HTML for the page</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;EPR Document Sweep &lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-amber.min.css"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /&gt;

    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;link href="Styles/Styles.css" type="text/css" rel="stylesheet" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header mdl-layout__header--waterfall"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout__title"&gt;
                    EPR Document Sweep
                &lt;/div&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right" id="searchBox"&gt;
                    &lt;label class="mdl-button mdl-js-button mdl-button--icon" for="srchText"&gt;
                        &lt;i class="material-icons"&gt;search&lt;/i&gt;
                    &lt;/label&gt;
                    &lt;div class="mdl-textfield__expandable-holder"&gt;
                        &lt;input class="mdl-textfield__input" type="text" name="sample" id="srchText" /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;!-- Navigation. We hide it in small screens. --&gt;
                &lt;nav class="mdl-navigation mdl-layout--large-screen-only"&gt;
                    &lt;a class="mdl-navigation__link" href=""&gt;
                        &lt;i class="material-icons"&gt;link&lt;/i&gt;
                        Intranet
                    &lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Document Sweep&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a class="mdl-navigation__link" href="#"&gt;Add MRNs&lt;/a&gt;
                &lt;a class="mdl-navigation__link" href="#"&gt;Log&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
        &lt;main class="mdl-layout__content"&gt;
            &lt;form action="#"&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
                    &lt;input class="mdl-textfield__input" type="text" id="txtMRN"&gt;
                    &lt;label class="mdl-textfield__label" for="txtMRN"&gt;MRN&lt;/label&gt;
                &lt;/div&gt;  
                &lt;div style="width:100%;" &gt;
                    &lt;div style="vertical-align:top; display:inline-block;"&gt;
                        &lt;select size="4" name="lstMRN" id="lstMRN" class="mdl-list listBox"&gt;&lt;/select&gt;
                    &lt;/div&gt;
                    &lt;div style="display:inline-block; vertical-align:text-top;"&gt;
                        &lt;button id="btnSelect" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored selectButtons"&gt;
                            &amp;gt;                        
                        &lt;/button&gt;

                        &lt;button id="btnDeselect" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored selectButtons"&gt;
                            &amp;lt;
                        &lt;/button&gt;
                    &lt;/div&gt;

                    &lt;div style="vertical-align:top; display:inline-block;"&gt;
                        &lt;select size="4" name="lstMRNSelected" id="lstMRNSelected" class="mdl-list listBox"&gt;&lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;            
            &lt;/form&gt;
        &lt;/main&gt;
    &lt;/div&gt;
    &lt;script src="https://code.getmdl.io/1.2.1/material.min.js"&gt;&lt;/script&gt;
    &lt;script src="Scripts/Default.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>