DTM | Event Based Rule

I’m trying to setup an event (button click) based rule for a my site in DTM.

The button has the following;

·         Inner HTML - <span class="btn-value">Next</span> <i class="icon--next"></i>

·         Outer HTML - <button type="button" name="next" class="btn cta centered-mobile btn--next" id="trigger-step2" data-step="1"><span class="btn-value">Next</span><i class="icon--next"></i></button>

·         CSS selector - button.cta:nth-child(1)

I tried creating the rule based on the css selector (button.cta:nth-child(1)) & also without the CSS filter (button#trigger-step2), but neither option worked.

Could someone please provide any guidance on what I’m doing wrong?

Thanks!