How do I collapse each <div> dynamically when clicked?

See more:

Javascript

PHP

Lets say i have 3 divs that has been looped i have div1 div2 div3 and for each div i have a button named "Show More", supposedly if i click the show more under div1 the details of div1 should appear, and if i clicked the show more under div2 the details of div2 should appear and if i clicked the show more in div3 the details of div3 should appear.

The problem is this: whenever i clicked show more under each div the details that will appear is div1. how can i make the details of div2 appear if i clicked the show more under it and the details of div3 if i clicked the show more under it.

What I have tried:

@foreach($detail as $detail)
   Title1: {{ $detail->detail1 }}
   Title2: {{ $detail->detail2 }}
   Title3: {{ $detail->detail3 }}
   <button class="btn btn-warning" data-target="#show" data-toggle="collapse">Show More</button>

   <div class="collapse" id="showthis">
      Title4: {{ $detail->detail4 }}
      Title5: {{ $detail->detail5 }}
      Title6: {{ $detail->detail6 }}
   </div>
@endforeach