html - JavaScript Array is filtered but select option are not filtered duplicate IDs?

Question

i have two datatable with drag and drop functionality. each row of datatable contain the IDs. when i drag the row of table 1 into table 2. the data stored into the Array. i have the addArray function for push the IDs into an Array there also filtering the duplicate IDs and make it uniqueArray. now i want to create the Select option Element which containing the iDs as a value. i want the select option to reCreate whenever i drag and drop. I would be grateful for any help.

JS

$(document).ready(function () {
    new Sortable(drag, {
        group: 'sortables',
        onChange: function (e, tr) {
            addArray();
        },
    });

    new Sortable(drop, {
        group: "sortables",
        onChange: function (event, tr) {
            addArray();
        },
    });

    function addArray() {
        let articles = [];

        $('#drop').children().each(function () {
            articles.push($(this).data('pk'))
        });
        let uniqueArray = articles.filter((item, index, array) => { // filter Duplicate ID
            return array.indexOf(item) === index
        })
        $.each(uniqueArray, function (index, value) { // Create Option Element using Each ID form Array
            $('#id_articles').append($('<option/>', { value: value, selected: '' }));
        });
        console.log(uniqueArray)
    };
});

OUTPUT

<select name="articles" id="id_articles" multiple="" style="display: none;">
    <option value="67" selected="selected"></option>
    <option value="66" selected="selected"></option>
    <option value="67" selected="selected"></option>
    <option value="67" selected="selected"></option>
    <option value="66" selected="selected"></option>
    <option value="66" selected="selected"></option>
    <option value="67" selected="selected"></option>
    <option value="67" selected="selected"></option>
    <option value="66" selected="selected"></option>
</select>

Answer 1

I can't see the purpose of updating articles array then filter it to be uniqueArray while you can update both arrays in first .each() by using a simple function to prevent duplicate values .. Try the next code it should work

function addArray() {
   let articles = uniqueArray = [];
   $('#drop').children().each(function () {
      articles.push($(this).data('pk'));
      uniqueArray = stop_duplicate_in_array(uniqueArray , $(this).data('pk'));
   });
   console.log(uniqueArray)
   let options = '';
   $.each(uniqueArray, function (index, value) { // Create Option Element using Each ID form Array
     options += `<option value="${value}" selected="">${value}</option>`;
   }); 
   $('#id_articles').html(options);   
}
function stop_duplicate_in_array(array , value){
   var index = array.indexOf(value);
   if(index > -1){array.splice(index, 1);}
   array.push(value);
   return array;
}