<form>
    <div class="customize_row">
    <div class="customize_column">
    <div>Available Dashboard Views</div>
    <select name="selectfrom" id="select-from" multiple size="5">
        {% for cp in unusedDashboards %}
           <option value="{{ cp }}">{{ cp }}</option>
        {% endfor %}
    </select>
    </div>
    <div class="customize_column">
    <br>
    <div class="btn btn-success" id="btn-add">Add &raquo;</div><br><br>
    <div class="btn btn-success" id="btn-remove">&laquo; Remove</div>
    </div>
    <div class="customize_column">
    <div>Selected Dashboard Views</div>
    <select name="selectto" id="select-to" multiple size="5">
        {% for cp in dashboards %}
           <option value="{{ cp }}">{{ cp }}</option>
        {% endfor %}
    </select>
    <br>
    <div class="btn btn-high btn-info" id="btn-save">Save</div>
    </div>
    <div class="customize_column">
    <br>
    <div class="btn btn-success" id="btn-up">Up</div><br><br>
    <div class="btn btn-success" id="btn-down">Down</div>
    </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-up').bind('click', function() {
        $('#select-to option:selected').each( function() {
            var newPos = $('#select-to option').index(this) - 1;
            if (newPos > -1) {
                $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
                $(this).remove();
            }
        });
    });
    $('#btn-down').bind('click', function() {
        var countOptions = $('#select-to option').size();
        $('#select-to option:selected').each( function() {
            var newPos = $('#select-to option').index(this) + 1;
            if (newPos < countOptions) {
                $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
                $(this).remove();
            }
        });
    });
    $('#btn-save').bind('click', function() {
         var items=[];
         $("#select-to option").each(function() { items.push($(this).val()); });
         $.ajax({
                url: '/customize/',
                dataType: 'json',
                data: {
                        dashboards: items.join(","),
  		        csrfmiddlewaretoken: "{{ csrf_token }}" // < here
                },
                type: 'POST',
                complete: function () {
                        location.reload();
                }
        });
    });
});
</script>