How to remove duplicate values from multiple select?

Question

I have taken multiple select, the values which i select from one select should be appear in second select where duplicates are not allowed..

<select name="campaignName" size=""multiple>
   <c:forEach items="${campaignDetails}" var="campaignDetails">
      <option value="${campaignDetails.campaignId}">${campaignDetails.campaignName}</option>
   </c:forEach>
</select>     
<select property="selectedCampaigns" id="selectedCampaigns" name = "selectedCampaigns" size="13" styleClass="regioncombo" style="width:200px;"  multiple="true" >
</select>

Script to add selected vales from one select to another...

 $(document).ready(function () {
     $(document).on('click', '#manDiv', function () {
         $("#submitSync").show();
     });

});

$(document).ready(function () {
   $("#addCampaign").click(function () {
      $("#select-campaigns option:selected").each(function () {
         var $this = $(this);
         if ($this.length) {
            var selectedCampaigns = document.getElementById("selectedCampaigns");
//          console.log(selectedCampaigns);
            for (var j = 0; j < $this.length; j++) {
               var option = document.createElement('option');
//             console.log((option[0]).attr('value'));
               option.text = $this.text();
               option.value = $this.val();
               selectedCampaigns.add(option, j + 1);
            }
         }
      });
   });
});

The above code is allowing duplicate values also but I want to know how can i restrict the adding of duplicate values. i.e, once we select and add one value same value should not be accepted second time.

Answer 1

Here is a working example.

Script compares only text content of options.

Id-s of elements 'select' where changed to make the script work.

Script compares each options of second select with each selected option of first select and appends selected option if it has no duplicates.

$(document).ready(function () {
     $(document).on('click', '#manDiv', function () {
         $("#submitSync").show();
     });
  
    $("#addCampaign").click(function () {
      $("#campaigns option:selected").each(function () {
         var $this = $(this);
         if ($this.length) {
            var selectedCampaigns = document.getElementById("selectedCampaigns");
            for (var j = 0; j < $this.length; j++) {
                var duplicate = false;
              for (var i=0; i < selectedCampaigns.length; i++) {
                  if ($this.text() == $("#selectedCampaigns option").eq(i).text())
                    duplicate = true;
              }
               if (!duplicate) {
                var option = document.createElement('option');
               option.text = $this.text();
               option.value = $this.val();
               selectedCampaigns.add(option, j + 1);
               }
           }
         }
      });
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="campaignName" size="10" multiple="true" id="campaigns">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>
<select property="selectedCampaigns" id="selectedCampaigns" name="selectedCampaigns" size="13" styleclass="regioncombo" style="width:200px;" multiple="true">
</select>
<button id="addCampaign">addCampaign</button>