将循环上的id定位为使用Jquery切换类

我试图做到当用户按下按钮时,按钮内的元素会改变类。当我有一个清晰的按钮id时,我成功地做到了这一点。

<button id="buttonId"><i class="class1"></i></button>
<script>
    $(document).ready(function(){
        $("#buttonId").click(function(){
            $(this).find('i').toggleClass('class2').toggleClass('class1');
        });
    });
</script>

现在我需要创建一系列按钮,为此我将id设置为:

{% for i in X %}
<button id="{{i.id}}"><i class="class1"></i></button>
{% endfor %}

然而,我不知道如何在函数中引用I.id。下面的示例不起作用。

$(document).ready(function(){
    $("{{i.id}}").click(function(){
        $(this).find('i').toggleClass('class2').toggleClass('class1');
    });
});

如何找到id?