How to add selected item in another multiple value dropdown in Bootstrap-select

Question

I'm having trouble with dynamically selecting an option in another mulitiple dropdown using Bootstrap-select. I want to append the item selected in "box one" to the ones already selected in "box two".

I have been able to selected multiple ones by manually adding them:

$('select#one').on('change', function() {
    $('#two').selectpicker('val', ['TestA','TestB','','TestC']);
    $('#two').selectpicker('refresh');
});

and grab the ones already selected:

$('select#one').on('change', function() {
    var existingValues = $("#two").val() || [];
    alert(existingValues);
});

the issue is that I can't seem to add all this together. This doesn't work, but it shows what I'm looking for:

$('select#one').on('change', function() {
    var selectedOption = $(this).find(":selected").text();
    var existingValues = $("#two").val() || [];
    var newValues = selectedOption+','+existingValues;
    var newValues = '\''+newValues.replace(/,/g, '\',\'')+'\''; //didnt help
    alert(newValues);
    $('#two').selectpicker('val', [newValues]);
    $('#two').selectpicker('refresh');
});

Fiddle that work, but replaces values instead of adding it to the selected ones: https://jsfiddle.net/3tx8mzqn/

Answer 1

This works.

$("#one").on("change",function(event, clickedIndex, newValue, oldValue){
    var select2values = $("#two").val();
    var value = $(this).val();
    if(select2values.indexOf(value)==-1)
    {
        select2values.push(value);
        $("#two").val(select2values);
    }
    $("#two").selectpicker('refresh');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<select class="selectpicker" data-style="btn-danger" data-width="150px" title="box one" id="one" name="one" required>
    <option value="TestA">TestA</option>
    <option value="TestB">TestB</option>
    <option value="TestC">TestC</option>
    <option value="TestD">TestD</option>
    <option value="TestE">TestE</option>
    <option value="TestF">TestF</option>
</select>
<select class="selectpicker" data-style="btn-primary" data-width="fit" multiple title="box two" id="two" name="two" required>
    <option value="TestA">TestA</option>
    <option value="TestB">TestB</option>
    <option value="TestC">TestC</option>
    <option value="TestD">TestD</option>
    <option value="TestE">TestE</option>
    <option value="TestF">TestF</option>
</select>