Estoy tratando de hacer que cuando un usuario presione un botón, un elemento dentro del botón cambie de clase. Me las arreglé para hacer eso cuando tengo una identificación clara para el botón.

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

Ahora necesito crear una secuencia de botones, y para eso configuré la identificación de esta manera:

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

Sin embargo, no sé cómo puedo hacer referencia a i.id dentro de la función. El siguiente ejemplo no funcionó.

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

¿Cómo encuentro la identificación?