Как добавить уникальные CSS-идентификаторы для кнопок планов в плагине Discourse Subscriptions

Разработка
1

Я хочу изменить этот шаблон, чтобы у каждой опции оплаты был свой класс, который я мог бы использовать для отдельной стилизации кнопок. Сейчас, похоже, нет способа отдельно нацеливаться на кнопки тарифных планов. Дайте знать, если я ошибаюсь.

По сути, я хочу убедиться, что каждый payment-plan в коде ниже имеет свой собственный класс, например button1 или button2 или что-то подобное.

<div class="subscribe-buttons">
  {{#each orderedPlans as |plan|}}
    {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan")}}
  {{/each}}
</div>
2

Разобрался, для тех, кому интересно. В Ember.js есть удобная функция для получения индекса в цикле, а также хелпер для конкатенации этого индекса со строкой:

<script type="text/x-handlebars" data-template-name="javascripts/components/payment-options">
    <p>
        {{i18n "discourse_subscriptions.plans.select"}}
    </p>
    
    <div class="subscribe-buttons">
        {{#each orderedPlans as |plan i|}}
            {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan") elementId=(concat 'button' i)}}
        {{/each}}
    </div>
</script>