How to make "Dual List Box plugin for jQuery and Bootstrap" dynamic?
<p>I want a <a href="https://github.com/Geodan/DualListBox/" rel="nofollow noreferrer">dual list box</a> to be dynamic. For example when a user clicks a certain link, a method will be called and then get the list from the database and then these data will be displayed in the modal. The problem is that it only works in the first run. When I refresh the page it works again once.</p>

<p>Here is my code so far.</p>

<pre><code>            function gettype2(id){
                $('#duallist').bootstrapDualListbox('destroy');
                $.post('" . yii::$app-&gt;request-&gt;baseUrl . "/accounts/gettype2',{'id':id},function(data){
                    $('#duallist').html(data);
                    var demo1 = $('#duallist').bootstrapDualListbox({infoTextFiltered: '&lt;span class=\"label label-purple label-lg\"&gt;Filtered&lt;/span&gt;'});
            var container1 = demo1.bootstrapDualListbox('getContainer');
            container1.find('.btn').addClass('btn-white btn-info btn-bold');
                });
            }
</code></pre>

<p>I am making a user role permission page.</p>

<p><a href="https://i.stack.imgur.com/vTZe5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vTZe5.png" alt="enter image description here"></a></p>

<p>First click of the edit link. (working fine)</p>

<p><a href="https://i.stack.imgur.com/2otKP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2otKP.png" alt="enter image description here"></a></p>

<p>Second click. Does not work correctly.</p>

<p><a href="https://i.stack.imgur.com/QsSRi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QsSRi.png" alt="enter image description here"></a></p>