vanilla javascript drag and drop

vanilla_js_drag_drop.js

<div class="row">
    <div class="col-12"></div>
    <div class="col-6">
        <label class="text-info">{% trans %}Your chosen providers{% endtrans %}</label>
        <ul class="list-group h-100 provider-drop-area" id="chosen">
            {% for provider in chosenProviders %}
                <li class="list-group-item active p-3 mb-2 provider-drop-box" draggable="true" data-id="{{ provider.Id }}">
                    <img class="rounded" id="provider_{{ provider.Id }}" title="{{ provider.Name }}" alt="{{ provider.Name }}" src="/assets/images/provider/{{ provider.Code|lower }}.png" draggable="false"/>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="col-6 fixed-height">
        <label>Available providers</label>
        <ul class="list-group h-100 provider-drop-area" id="available">
            {% for provider in availableProviders %}
                <li class="list-group-item list-group-item-secondary p-3 mb-2 provider-drop-box" draggable="true" data-id="{{ provider.Id }}">
                    <img class="rounded" title="{{ provider.Name }}" alt="{{ provider.Name }}" src="/assets/images/provider/{{ provider.Code|lower }}.png" draggable="false"/>

                </li>
            {% endfor %}
        </ul>
    </div>
</div>
<script>
    $(function () {
        $('select').selectize();

        let providerDropArea = document.querySelectorAll('.provider-drop-area');
        let providerDropBox = document.querySelectorAll('.provider-drop-box');

        providerDropArea.forEach(function (userItem) {
            userItem.addEventListener('drop', (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                let destinationElement = ev.target;
                while (!destinationElement.classList.contains('provider-drop-area')) {
                    destinationElement = destinationElement.parentElement;
                }
                // // Get the id of the target and add the moved element to the target's DOM
                var data = ev.dataTransfer.getData("text/plain");

                let element = document.getElementById(data);
                if (destinationElement.id === 'chosen') {
                    element.classList.add('active');
                    element.classList.remove('list-group-item-secondary');
                    addButton(element);
                } else if (destinationElement.id === 'available') {
                    element.classList.remove('active');
                    element.classList.add('list-group-item-secondary');
                    removeButton(element);
                }
                destinationElement.appendChild(element);
                destinationElement.style.border = "none";

                //save list hidden field
                let childIds = [];
                let childNodes = document.getElementById('chosen').children;

                for (i = 0; i < childNodes.length; i++) {
                    childIds.push(childNodes[i].dataset.id);
                }
                document.getElementById('providersListId').value = JSON.stringify(childIds);


            });
            userItem.addEventListener('dragover', (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                ev.dataTransfer.dropEffect = "move"
                ev.currentTarget.style.border = "dashed";
            });

            userItem.addEventListener('dragleave', (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                ev.dataTransfer.dropEffect = "move"
                ev.currentTarget.style.border = "none";
            });

        });

        providerDropBox.forEach(function (userItem, index) {
            userItem.id = `dragDropBox${index}`;

            userItem.addEventListener('dragstart', (ev) => {
                if (ev.currentTarget.classList.contains('provider-drop-box')) {
                    // Add the target element's id to the data transfer object
                    ev.currentTarget.style.opacity = "0.3";
                    ev.dataTransfer.setData("text/plain", ev.target.id);
                    ev.dropEffect = "move";
                } else {
                    ev.preventDefault();
                }
            });

            userItem.addEventListener('dragend', (ev) => {
                // Restore source's border
                ev.currentTarget.style.opacity = "1";
                // Remove all of the drag data
                ev.dataTransfer.clearData();
            });

        });

        function addButton(element) {
            //check if we already have button
            let hasButton = false;
            let children = element.children;
            for (let i = 0; i < children.length; i++) {
                if (children[i].nodeName === 'BUTTON') {
                    hasButton = true;
                }
            }
            if (!hasButton) {
                let button = document.createElement('BUTTON');
                button.className = 'btn btn-light pull-right';
                let icon = document.createElement('I');
                icon.className = 'fa fa-cog';
                button.appendChild(icon);
                button.addEventListener('click', event => {
                    event.preventDefault();
                    console.log('button clicked');
                });
                element.appendChild(button);
            }
        }

        function removeButton(element) {
            console.log('remove button');
            let children = element.children;
            for (let i = 0; i < children.length; i++) {
                if (children[i].nodeName === 'BUTTON') {
                    children[i].remove();
                }
            }
        }

        let chosenProviders = document.getElementById('chosen').children;
        for (let i = 0; i < chosenProviders.length; i++) {
            addButton(chosenProviders[i]);

        }

    });
</script>