I'm trying to make it so when a user presses a button, an element inside the button changes class. I managed to do that when I have a clear id for button.

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

Now I need to create a sequence of buttons, and for that I've set the id like this:

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

However I don't know how I can reference i.id inside the function. The example below didn't work.

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

How do I find the id?