Move only unique Items from One Multi Select List To Another using jQuery

Question

Here is my select box...

<select id="selectOne" multiple style="height: 150px">
 <option>March 2018</option>
 <option>May 2018</option>
 <option>January 2019</option>
 <option>August 2020</option>
</select>

<button type='button' id="btnRight"> >> </button>
<button type='button' id="btnLeft"> << </button>

<select id="selectTwo" multiple style="height: 150px">
 <option>Anaconda</option>
 <option>Daniel</option>
 <option>Jack</option>
 <option>March 2018</option>
</select>

Here is my jquery

$(function() {
 function moveItems(origin, dest) {
  $(origin).find(':selected').appendTo(dest);
 }

function moveAllItems(origin, dest) {
 $(origin).children().appendTo(dest);
}

$('#btnLeft').click(function() {
 moveItems('#selectTwo', '#selectOne');
 });

 $('#btnRight').on('click', function() {
   moveItems('#selectOne', '#selectTwo');
 });

});

I can move select option but i want to move only unique option if any option exist on right select box then keep move data and remove exist data.

Here is the jsfiddle link.

https://jsfiddle.net/uthpal/g60sertc/

Answer 1

I stored the selected items somewhere. In order to check the existing item in the destination, I check each of the selected items one by one. I will explain inside the code to make it easier.

function moveItems(origin, dest) {
    var o = $(origin).find(':selected');
    for (var i = 0; i < o.length; i++) {
        for (var j = 0; j < $(dest).children().length; j++) {
            if ($(dest).children()[j].text == o[i].text){
                break; // stop looping once the selected item is found in destination.
            }
        }
        var temp = $(dest).children().length; // keep the original destination size
        $(dest)[0].appendChild(o[i]);
        if (j != temp) { // remove the duplicate item in destination 
            $(dest)[0].removeChild($(dest)[0].lastChild);
        }
    }
}