Hay una plantilla para crear botones, el número puede ser diferente. Es necesario que cada botón abra un bloque al pulsarlo. Intenté usar scripts JS, establecieron correctamente la identificación del elemento desplegable, pero no puedo cambiar el enlace, como resultado, todos los elementos se abren o todos los botones abren solo una sección.

 <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>

Quiero cambiar los valores data-bs-target , pero después del primer elemento, el script se rompe y obtengo los mismos valores.

 <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>

El resultado:

 <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">

Ayúdame a encontrar errores pls