Copy an option from one select to another with jquery

Question

Guys I am trying to copy the options from one select to another using change, but when copying is passing the value of the option I selected and the text of all the options of select at the same time, I am passing the image of how it is in the console for you to have an idea.

My code is like this:

'''

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"  type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"                    type="text/javascript"></script>

<div class="form-group row">
    <div class="col-md-6">
        <label for="clienteDisponivel"><strong>Clientes Encontrados</strong></label>
        <select name="clienteDisponivel" id="clienteDisponivel" class="custom-select custom-select-sm mb-3" multiple="multiple" size="5" required>
            <cfif qBuscarClientes.RecordCount>
                <cfloop query="qBuscarClientes">
                    <option value="#qBuscarClientes.Id#">#qBuscarClientes.Nome#</option>
                </cfloop>
            </cfif>
        </select>
    </div>
    <div class="col-md-6">
        <label for="clienteSelecionado"><strong>Pedidos Selecionados</strong></label>
        <select name="clienteSelecionado" id="clienteSelecionado" class="custom-select custom-select-sm mb-3" multiple="multiple" size="5" required>
        </select>
    </div>
</div>
<script>
    function addOption(origem,destino,valor,texto){
        $("#"+destino).append('<option value="'+valor+'">'+texto+'</option>');
        $("#"+origem+" option[value='"+valor+"']").remove();
        ordenarOptions(origem);
        ordenarOptions(destino);
    }
    $(function(){
        $("#clienteDisponivel").on("change",function(){
            var valor   = $(this).val(),
                texto   = $(this).text(),
                opt     = "";
            addOption("clienteDisponivel","clienteSelecionado",valor,texto);
            /*opt = $(this).clone(true).attr("selected","selected");
            $("#clienteSelecionado").append(opt);*/
        });
    });
</script>

'''

And the result is like this:

Does anyone have any idea?

Answer 1

moving here I managed to solve the problem as follows.

'''

function ordenarOptions(obj) { 
    var options = $("#"+obj+" option"); 
    
    options.sort(function(a, b) { 
        var at = $(a).text(); 
        var bt = $(b).text(); 
        return (at > bt) ? 1 : ((at < bt) ? -1 : 0); 
    }); 
    options.appendTo("#"+obj); 
}
$(function(){
    $("#clienteDisponivel").on("change",function(){
        $("#clienteSelecionado").append($("#clienteDisponivel option:selected").clone(true));
        $("#clienteDisponivel option:selected").remove();
        ordenarOptions("clienteDisponivel");
        ordenarOptions("clienteSelecionado");
    });
    $("#clienteSelecionado").on("change",function(){
        $("#clienteDisponivel").append($("#clienteSelecionado option:selected").clone(true));
        $("#clienteSelecionado option:selected").remove();
        ordenarOptions("clienteDisponivel");
        ordenarOptions("clienteSelecionado");
    });
});

'''

I don’t know if it’s the best, but it worked, now I just pass the data of the option I clicked.