按钮折叠时，行中的所有元素都会发生变化

Question

目前，我希望在箭头中单击时折叠表格中的行（参见图像）。

问题是，当我单击一行时，所有行中的箭头都会发生变化。我只需要更改correcto行中的箭头。

这是代码

<tbody>
                                        @if ($expenditures->count() > 0)
                                            @foreach ($expenditures as $expenditure)
                                                <tr>
                                                    <td>{{ $expenditure->concept }}</td>
                                                    <td>{{ $expenditure->created_at == $expenditure->updated_at ? date('d/m/Y', strtotime($expenditure->created_at)) : date('d/m/Y', strtotime($expenditure->updated_at)) }}</td>
                                                    <td>$ {{ $expenditure->quantity }} MXN</td>
                                                    <td style="width: 5%;"><a href="#" id="arrow-{{ $expenditure->concept }}" data-toggle="collapse" data-target="#demo-{{ $expenditure->concept }}" ><i class="fa fa-arrow-down" aria-hidden="true"></i></a></td>                                                    
                                                </tr>                                                                                 

                                                    <tbody id="demo-{{ $expenditure->concept }}" class="collapse">
                                                        @if ($expenditures->count() > 0)
                                                            @foreach ($expenditures as $expenditure)
                                                                <tr>
                                                                    <td style="padding-left: 20px;">{{ $expenditure->concept }}</td>
                                                                    <td>{{ $expenditure->created_at == $expenditure->updated_at ? date('d/m/Y', strtotime($expenditure->created_at)) : date('d/m/Y', strtotime($expenditure->updated_at)) }}</td>
                                                                    <td>$ {{ $expenditure->quantity }} MXNSSS</td>
                                                                    <td style="width: 5%;"></td>                                                    
                                                                </tr>                                                                                          
                                                            @endforeach
                                                        @endif
                                                    </tbody>

                                            @endforeach
                                        @endif
                                    </tbody>

现在是剧本

$('[id^="demo-"]').on("hide.bs.collapse", function(){
            $('[id^="arrow-"]').html('<i class="fa fa-arrow-down" aria-hidden="true"></i>');
          });
          $('[id^="demo-"]').on("show.bs.collapse", function(){
            $('[id^="arrow-"]').html('<i class="fa fa-arrow-up" aria-hidden="true">');
          });

崩溃前的

崩溃后，当只有崩溃的箭头需要改变时，所有箭头看起来都相同