Html : view an id outside its parent id - html

Question

I have this collapse in my web app :
<div id="accordionExample" >
#foreach ($mysection as $section)
<?php $sec_name='home.sec'.$section->section_name ;
$collaps_count++;
$nf = new NumberFormatter("en", NumberFormatter::SPELLOUT);
$numbers_name=$nf->format($collaps_count);
$numbers_name=ucfirst($numbers_name);
$collapse_id='collapse'.$numbers_name;
$heading='heading'.$numbers_name;?>
<div class="card">
<div class="ard-header py-0 px-0" id="$heading" style="border: none">
<button class=" btn w-100 text-right bg-light " type="button" data-toggle="collapse" data-target="#{{$collapse_id}}" aria-expanded="true" aria-controls="{{$collapse_id}}" >
<h5 class="">{{__($sec_name)}}</div></h5>
</button>
</div>
<div style="height:5px"></div>
<div id="{{$collapse_id}}" class="collapse <?php if($collaps_count == 1) echo 'show'?>" aria-labelledby="{{$heading}}" data-parent="#accordionExample">
#foreach ($course->Lession as $lession)
#if ($section->section_name == $lession->section_name)
<div class=" card-body flex-row d-flex justify-content-between">
<div>- {{$lession->$less_lang}}</div>
#if ($lession->id==$order->lession_id)
<div class="text-left ml-2"><i class="material-icons" style="color:green">visibility</i></div>
#else
<div class="text-left ml-2"><i class="material-icons" style="color:grey">visibility</i></div>
#endif
</div>
#endif
#endforeach
</div>
</div>
#endforeach;
</div>
<!-- End of Lessionss Card -->
</div>
The problem is while looping the collapse :
first row is start inside (accordionExample) id correctly.
second row start outside (accordionExample) id.
this row start with the parent of (accordionExample) id as show in image :

Answer 1

You have 2 errors in your markup:
Closing div inside button tag:
<h5 class="">{{__($sec_name)}}</div></h5>
Replace by
<h5 class="">{{__($sec_name)}}</h5> OR <h5 class=""><div>{{__($sec_name)}}</div></h5>
Extra div at the end.

Answer 2

your foreach loop is starting after #accordionExample but at the end there is 2 closing tag of div.
#endforeach;
</div>
<!-- End of Lessionss Card -->
</div>
this should be change to
</div>
#endforeach;
<!-- End of Lessionss Card -->
</div>
``