Динамический блок двойного списка с помощью django

Я пытаюсь реализовать двойной динамический блок двойного списка с помощью django. Я пытаюсь адаптировать этот плагин jquery:

https://www.jqueryscript.net/form/Dual-List-Box-Multi-Selection.html

но это не работает: кнопка, похоже, не нажимается. Вот мой код:

forms.py

from django import forms
from station.models import Station

station_all=Station.objects.all()

class VdlForm(forms.Form):
    vdl_name = forms.CharField(label='nome virtual data logger', max_length=20,
                                 widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'nome vdl'}))
    stations = forms.ModelMultipleChoiceField(queryset=station_all)
    selected_stations = forms.ModelMultipleChoiceField(queryset=Station.objects.none())

views.py

from django.http import HttpResponseRedirect
from django.shortcuts import render, redirect
from .forms import VdlForm


def new_vdl(request):
    template_name = 'vdl.html'
    heading_message = 'Add a new vdl'

    if request.method == 'POST':
        form = VdlForm(request.POST or None)
        if form.is_valid():
            vdl_name = form.cleaned_data.get("vdl_name")
            stations = form.cleaned_data.get("stations")

        return HttpResponseRedirect('new_vdl')

    else:
        form = VdlForm()

    return render(request, template_name, {'form': form, 'heading': heading_message, })

vdl.html

{% extends 'base.html' %}

{% block content %}

<form method="post" novalidate>
  {% csrf_token %}

    <div class="jp-multiselect">
        <div class="from-panel">

            {{ form.vdl_name }}
            <br>
            {{ form.stations }}

        </div>
        <div class="move-panel">
            <button type="button" class="btn-move-all-right btn-primary"></button>
            <button type="button" class="btn-move-selected-right"></button>
            <button type="button" class="btn-move-all-left"></button>
            <button type="button" class="btn-move-selected-left"></button>
        </div>
        <div class="to-panel">

            {{ form.selected_stations }}

        </div>
        <div class="control-panel">
            <button type="button" class="btn-delete"></button>
            <button type="button" class="btn-up"></button>
            <button type="button" class="btn-down"></button>
        </div>

    </div>

  <button type="submit">Submit</button>
</form>

<script>
    $(".jp-multiselect").jQueryMultiSelection();
</script>


{% endblock %}

в моем base.html я импортирую js файл, упомянутый в плагине:

<link rel="stylesheet"href="{% static '/js/jquery-multi-selection.css' %}">
<script src="{% static '/js/jquery.multi-selection.v1.js' %}"></script>

Вот мой фактический результат:

Что не так?

Вернуться на верх