Using variables for CSS id in a loop with Jade Pug

I would like to build a loop of collapsable divs in jade / pug.

For example here is my first iteration which is working:

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
#response0.collapse
  .well
    pre=response

Unfortunately when I try this one

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
div(id= 'response0').collapse
  .well
    pre=session_detail.response

Or this

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
.collapse(id= 'response0')
#response0.collapse
  .well
    pre=session_detail.response

The html output looks great but the collapse button doesnt work.

What I would like to build is something like this that works:

-var i = 0
-session_details.forEach(function(session) {
  .row
    .col-md-5
      pre=session_detail.response
      -var dataTarget='#response'+i
      -var dataTargetResponse='response'+i
      button.btn.btn-primary(type='button', data-toggle='collapse', data-target=#{dataTarget}, aria-expanded='false', aria-controls='collapseExample')
        | Show Response
      div(id= dataTargetResponse).collapse
        .well
          pre=session_
  -i++

Do you have any ideas of what could I do? Thanks for your help

via Quentin Del