dynamic multiple list codeigniter javascript

Currently my page works but with a detail, in my database I have 2 tables for this part one with names of applications and another with names of servers and I am generating a dynamic list of applications and when I choose an element this load in a listbox called state servers and I have some buttons to pass, remove, pass everything and remove everything so that the items selected in "Status" go to another listbox called "destination" the problem is that when I change the application I want to restart the listbox Destination and I have not managed to do it, adding that I'm a newbie in javascript and I needed to do this so I used some internet codes so I do not understand much because it does not work if someone can help me. I'd really appreciate it.

I'm using Codeigniter and javascript

This is part of my code

            <div>
                <td id="line0" colspan="2" align="center">
                    <?php
                        echo "<select class='select' name='app' id='app' onChange='cargaContenido(this.id)'>";
                        echo "<option value='0'>Elige</option>";
                            for($i=0;$i<count($app['0']);$i++)
                            {
                                echo "<option value=".$app['1'][$i].">".$app['0'][$i]."</option>";
                            }                           
                        echo "</select>";
                    ?>
                </td>
            </div>
        </tr>
        <tr>
            <td id="line" rowspan="3" style="background-color: white; color: black;">Servidores:</td>

            <td id="line1" align="center" colspan="2">
                <select class="selectb" multiple='multiple' size='5' disabled="disabled" name="estados" id="estados" required>
                    <option value="0" >Selecciona opci&oacute;n...</option>
                </select>
            </td>
        </tr>
            <tr>
                <td id="line1" colspan="2">
                    <div id="dog1">
                        <input type="button" id="button" class="pasar izq" value="Pasar &raquo;">
                        <input type="button" id="button" class="quitar der" value="&laquo; Quitar">
                        <br>
                        <input type="button" id="button" class="pasartodos izq" value="Todos &raquo;">
                        <input type="button" id="button" class="quitartodos der" value="&laquo; Todos">
                    </div>
                </td>
            </tr>
            <tr>                
                <td id="line1" colspan="2" align='center'>
                    <select class='select' name="destino[]" id="destino" onChange='cargaContenido(this.id)' multiple="multiple" size="5" required></select>
                </td>
            </tr>
        </tr>

This is javascript

function buscarEnArray(array, dato)
{   var x=0;
    while(array[x])
    {
        if(array[x]==dato) return x;
        x++;
    }
    return null;
}

function cargaContenido(idSelectOrigen)
{
    var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
    var selectOrigen=document.getElementById(idSelectOrigen);
    var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
    if(opcionSeleccionada==0)
    {
        var x=posicionSelectDestino, selectActual=null;
        while(listadoSelects[x])
        {
            selectA=document.getElementById(destino);       
            selectA.length=0;
            selectActual=document.getElementById(listadoSelects[x]);
            selectActual.length=0;
            var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
            selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
            x++;
        }
    }
    else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
    {
        // Obtengo el elemento del select que debo cargar
        var idSelectDestino=listadoSelects[posicionSelectDestino];
        var selectDestino=document.getElementById(idSelectDestino);
        // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
        var ajax=nuevoAjax();
        ajax.open("GET", "http://localhost/app/js/select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
        ajax.onreadystatechange=function() 
        { 
            if (ajax.readyState==1)
            {
                // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
                selectDestino.length=0;
                var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
                selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    
            }
            if (ajax.readyState==4)
            {
                selectDestino.parentNode.innerHTML=ajax.responseText;
            } 
        }
        ajax.send(null);
    }
}

This is another javascript for the buttons

$().ready(function() 
    {
        $('.pasar').click(function() { return !$('#estados option:selected').remove().appendTo('#destino'); });  
        $('.quitar').click(function() { return !$('#destino option:selected').remove().appendTo('#estados'); });
        $('.pasartodos').click(function() { $('#estados option').each(function() { $(this).remove().appendTo('#destino'); }); });
        $('.quitartodos').click(function() { $('#destino option').each(function() { $(this).remove().appendTo('#estados'); }); });

        $('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });

    });