Making unique NID-based identifiers for titles using Bootstrap collapse fields in Drupal 8 Views

I created a view where I’m displaying only one content type, with four titles from content pages, one subtitle, and the content ID (nid) included in the fields for my view. I hid all these fields, and now I’m trying to create a Bootstrap collapse layout in the custom text field.

What is the best way that I can make each title show based on the NID of each content page? Basically, I need the user to be able to click each title, and make something unique show up in each of the 4 titles… For instance, the subtitle field only shows up underneath one particular content title. But so far, when I click ANY title, the subtitle field shows up (it shows up underneath the title that I want it too, but I definitely don’t want it to show up when I click an unrelated title).

I tried creating unique identifiers, as you can see below, but no dice. Any advice is greatly appreciated!

   <p>
     <a class="btn btn-link" data-toggle="collapse" data-target="#collapse-NID" href="#collapse-NID" role="button" aria-expanded="false" aria-controls="collapse-NID">
    {{ title }}
  </a>
</p>
<div class="collapse-NID" id="collapse-NID">
  <div class="card card-body">
     {{ field_file }}
  </div>
</div>


<p>
  <a class="btn btn-link" data-toggle="collapse" data-target="#collapse1-NID" href="#collapse1-NID" role="button" aria-expanded="false" aria-controls="collapse1-NID">
    {{ title }}
  </a>
</p>
<div class="collapse1-NID" id="collapse1-NID">
  <div class="card card-body">
    {{ field_file }}
    {{ field_subtitle }}
    {{ field_file }}
  </div>
</div>