How the rule data dispaly in selected, it's very confusing ?

[ducvu91]

i realy realy can't understant how the rule display in selected. let use demo https://maykinmedia.github.io/dual-listbox/

1. add One, selected : One
2. add Two, selected : Two, One
3. add Three, selected : Three, One, Two => :(
   It also happend with drag, i can't drag to position i wish.
   But in here, it ok. https://preview.keenthemes.com/metronic/demo9/features/miscellaneous/dual-listbox.html
   How to do it like this demo of metronic ?
   thanks a lot

[ROGERIO-RIOS]

This is not in the example code
dlb2.addEventListener("added", function (event) {
document.querySelector(".changed-element").innerHTML =
event.addedElement.outerHTML;
});
dlb2.addEventListener("removed", function (event) {
document.querySelector(".changed-element").innerHTML =
event.removedElement.outerHTML;
});

This one, maybe it will help you. I'm also having the problem of reading all the selected items on the right.

  let selectedItems = [ ];
    dlb2.addEventListener('added', function(event){
    console.log(event);
    console.log(event.addedElement);
    let addedElement = event.addedElement;
    let itemValue = addedElement.dataset.id;
    selectedItems.push(itemValue);
    console.log('Itens :', selectedItems);
    });