如何在javascript中将jinja变量保存到列表中？

Question

我正在使用Django创建一个用于运行排名选举系统的网络应用程序。我已经创建了一个模板，用于保存选票的排名。以下是我目前在模板中的内容：

<div id='main'>
    {% for candidate in candidates %}
    <div class='box'>
        <h3>{{candidate.UserID}}</h3>
        <input type=text>
    </div>
    {% endfor %}
</div>
<button id='send' type="submit">Submit</button>

<script type="text/javascript">

$(document).ready(function() {

var button = $("#send");

$(button).click(function() {
    var vals = [];
    $("#main :input").each(function(index) {
        vals.push(this.value);
    });
  vals = JSON.stringify(vals);
  console.log(vals);
});  
});
</script>

此时，列表会将用户输入到框中的值按顺序放入列表中。我现在要做的是创建一个单独的列表，用于存储候选者的名称或id，一个表格，我查询并使用Django传递给模板，并使用Jinja在上面呈现。

这样我就可以将排名与已排名的候选人联系起来。我正在使用JavaScript进行此操作，以便我可以处理这两个列表并返回Django（可能使用Ajax）一个新的列表，候选ID按候选人的排名顺序排列。

我将拥有需要渲染和录制的动态数量的候选人。我将来也可能随机化候选者的顺序，因此我需要创建一个新列表来关联它们。可以将jinja变量直接添加到JavaScript列表中吗？

我使用JavaScript和HTML的经验很少;我在这里的JavaScript是在朋友的帮助下完成的。因此，我问如何实现如上所述的代码。

提前感谢您的帮助。