With collapse only reveal next/one element - html

Question

I have the following templates in Flask (but I don't think that's a flask problem:
Contact.html
<button type="button" class="btn btn-secondary btn-sm" data-target="#score" data-toggle="collapse" data-placement="right">Score</button>
<div id="score" class="collapse">
<span class='dot green'></span> 1
</div>
Compare.html
<!-- I only added the key elements there are some other "formatting" parts.-->
{% include "contact.html" %}
{% include "contact.html" %}
As you see in Contact.html I use a collpase. Ref: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
My problem is that I compare two contacts and therefore they both have that div with id score.
If I now click on the first Button to reveal the score of the first contact then obviously both scores are revealed. But I only want to reveal the score of the contact I clicked.
My idea is instead of data-target="#score" to say something like: Take the next #score element but I don't know how I can do that.

Answer 1

I figure it out how to it. Basically it's easy in my case.
Because each contact has an unique id, I can use this to build the id like this:
<!-- Generate ID -->
{% set score_id = "score" + contact.idx|string %}
<!-- Use the ID in the collapse-->
<button type="button" class="btn btn-secondary btn-sm" data-target="#{{score_id}}" data-toggle="collapse" data-placement="right">Score</button>
<div id="{{score_id}}" class="collapse">
<span class='dot {{color}}'></span> {{ contact_score }}
</div>
Then only one will expanded if clicked on the Button. Therefore thanks #Anees Ijaz for the comment. The comment pushed me in the right direction.