There is a template for creating buttons, the number may be different. It is necessary that each button opens a block when pressed. I tried using JS scripts, they correctly set the id of the drop-down element, but I can't change the link, as a result, either all the elements open, or all the buttons open only one section.

<a class="btn btn-warning shadow-sm mb-3" data-bs-toggle="collapse" href="#" data-bs-target="#target">{{profile.profile}}</a>
<div class="collapse target" id="target">
  <div class="card card-body"><a class="btn btn-warning shadow-sm mb-3">Some text1</a></div>
  <div class="card card-body"><a class="btn btn-warning shadow-sm mb-3">Some text1</a></div>
</div>

I want to change data-bs-target values, but after first element the script breaks and I get the same values

<script type="text/javascript">
  $('.collapse').each(function(index) {
    // получаем текущий id элемент
    var id = $(this).prop('id');

    $(this).prop('id', id + index);

    $(this).parent().find('[href="#' + id + '"]').attr('href', '#' + id + index);
    $(this).parent().find('[data-bs-target="#' + id + '"]').attr('data-bs-target', '#' + id + index);

  });
</script>

The result:

<a class="btn btn-warning shadow-sm mb-3" data-bs-toggle="collapse" href="#" data-bs-target="#target0" aria-expanded="true">Some text</a>
<div class="target collapse show" id="target0" style="">
  <div class="card card-body"><a class="btn btn-warning shadow-sm mb-3">Some text1</a></div>
  <div class="card card-body"><a class="btn btn-warning shadow-sm mb-3">Some text1</a></div>
</div>


<a class="btn btn-warning shadow-sm mb-3" data-bs-toggle="collapse" href="#" data-bs-target="#target0" aria-expanded="true">Some text</a>
<div class="collapse target" id="target1">

Help me find mistakes pls