problemas al actualizar array de option - jquery

[leo_garay91]

hola a todos, estoy comenzando con jquery, tengo la siguiente situacion tengo 2 select, en el cual en uno me recupera datos desde la bd y en el otro select obtengo los datos que el usuario selecciona. lo que necesito es que en un array recuperar los valores de las opciones que estan en el segundo select, buscando encontre una algunas funciones, me recupera los valores, pero al cambiar la seleccion en el 2 select no se actualiza el array,.

como se puede solucionar esto?
desde ya gracias

Código HTML:

<!-- primer selec en donde se recuperan los datos desde  la bd-->
<tr class="palette">
    <td  class="contenedor"align="left" >
    <select  multiple="true" class="unselected" style="width: 100%; height: 100%;" >
        <?php 
                      while($row= mysqli_fetch_array($sql_producto,MYSQL_ASSOC)) 
                {
                    echo '<option value="'.$row['id_producto'].'">'.$row['nombreProd'].' - $'.$row['precioProd'].'</option>';
                }
 
        ?>
         </select>
 </td>
<!--controles-->    
 <td class="controls" align="right">
    <input type="button" class="add" value=">" />
        <input type="button" class="remove" value="<" />
</td>
<!--segundo selec en donde estan las opciones que el usuario selecciona-->
<td  class="contenedor2" align="right">
           <select multiple="true" class="selected" style="width: 100%; height: 100%;" name="productos[]"id="lista" required="required">
          </select>
</td>
 
</tr>
<strong id="valor">valor</strong>
 

script que me permite recuperar los valores del 2 select

Código Javascript:

var arreglo = [];
function recuperaValue(){
    $("#lista option").each(function(){
            arreglo.push($(this).val());
        });
    $("#valor").html(
        " <b>valor:</b> " +
        arreglo);
}
if ($("select").change(recuperaValue)){
//arreglo = 0;
recuperaValue();
}