Is there a best practice for naming class selectors for identification alone?

For example, for defining a single amount field with action button, we end up creating several div containers and div items among other elements.

<div class="form-group debit-amount">
  <label class="control-label">Debit amount/label>
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default btn-convert" type="button">Apply</button>
    </span>
  </div>
</div>

Now, I want to add a css selector, which is purely to identify click on the action button.

//Using a new class only to identify 
$myform.find('.debit-amount .btn-convert').on('click', doConvert);

//Using the style class itself 
$myform.find('.debit-amount .btn-primary').on('click', doConvert);

Is there a naming convention so that, these identification classes are not confused with style classes?

Is there a best practice for naming class selectors for identification alone?

For example, for defining a single amount field with action button, we end up creating several div containers and div items among other elements.

<div class="form-group debit-amount">
  <label class="control-label">Debit amount/label>
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default act-convert" type="button">Apply</button>
    </span>
  </div>
</div>

Now, I want to add a css selector, which is purely to identify click on the action button.

//Using a new class only to identify 
$myform.find('.debit-amount .act-convert').on('click', doConvert);

//Using the style class itself 
$myform.find('.debit-amount .btn-default').on('click', doConvert);

Is there a naming convention so that, these identification classes are not confused with style classes?