<select class="select1" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb1 = new DualListbox('.select1');
</script>
                    

                    <select class="select2" multiple>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    </select>
                    
                    <script>
                        let dlb2 = new DualListbox('.select2', {
                            availableTitle:'شماره‌های موجود',
                            selectedTitle: 'اعداد انتخاب شده',
                            addButtonText: '>',
                            removeButtonText: '>',
                            addAllButtonText: '>>',
                            removeAllButtonText: '>>',
                            searchPlaceholder: 'جستجوی اعداد'
                        });
                        dlb2.addEventListener('added', function(event){
                            console.log(event);
                        });
                        dlb2.addEventListener('removed', function(event){
                            console.log(event);
                        });
                    </script>
                    
                

                    <select class="select3" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb3 = new DualListbox('.select3', {
        showAddButton: false,
        showAddAllButton: false,
        showRemoveButton: false,
        showRemoveAllButton: false
    });
</script>
                

                    <select class="select4" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<script>
    let dlb4 = new DualListbox('.select4', {
        showSortButtons: true,
    });
</script>