How can I select a somewhat dynamic ID based on the index position?

I will try to explain what I mean first.

In a drop down menu, there are 5 buttons, 2 of them have static IDs (meaning they are hardcoded), 3 of them can be changed through a different micro service (when you change the break type for example). The IDs for these 3 buttons are generated based on the name of the break type, but they always end up with _ButtonId" and usually contain the word "Break".

It looks something like this, I removed everything else from the div to keep it short:

  <div class="user-status__group">
   <button id="logoutButtonId"  </button>
   <button id="activateButtonId"  </button>
   <button id="RestroomBreak_ButtonId"  </button>
   <button id="LunchBreak_ButtonId" </button>
   <button id="TechnicalBreak_ButtonId"  </button>
 </div>

I use testcafe and what I want to achieve is to be able to have 3 different buttons for these breaks. Something like breakButtonOne = *break_ButtonId[1] breakButtonTwo = *break_ButtonId[2]

I tried something like based on things I've read online / through documentation:

  private breakBtnOne = Selector("[id$='_ButtonId']:eq(1)");

OR

  private breakBtnOne = Selector('[id$="_ButtonId"]:nth-child(1)')

This didn't seem to work, first one returns an error that it is not a valid selector, the second one can't find button, in this case, the first break button from that list.

Can you please point me in the right direction? I checked some testcafe documentation, but it suggests I should use attributes instead of IDs, which is not an option for me because the whole UI has react components/containers and some UI fragments. The IDs are based on what is in the UI fragment, they are not static, but still mentain something like ThisSection_anId_ButtonId and the attributes change.

I'm using this basic example so I can understand how I should proceed further because I'm totally not an expert in TypeScript / JS. Thank you for your time!