I often use a caret icon to show if a collapse in Bootstrap 5 is open or closed.

For example, I'll have some html like this:

<h4 class="border" role="button" data-bs-toggle="collapse" href="#plinks">
  <i id="plinks-closed" class="fa fa-caret-right"></i> 
  <i id="plinks-open" style="display:none;" class="fa fa-caret-down"></i> 
  Plinks
</h4>   

and some js like this to switch out the caret icon when the collapse is opened or closed:

$('#plinks').on('show.bs.collapse', function () {
  $( "#plinks-closed").hide();
  $( "#plinks-open").show();
});
$('#plinks').on('hide.bs.collapse', function () {
  $( "#plinks-closed").show();
  $( "#plinks-open").hide();
});

Sometimes I have a lot of these and I use a lot of different IDs and js sections to make them work, and all those js sections for each ID seems kind of messy and inefficient.

What I'm looking for is a more universal non-id specific way to take the right-caret and swap it out for the left-caret in an element that I assign .caret-collapse. It would automatically populate the "closed caret" upon load then automatically swap that out for the "open caret" when the collapse is opened.

I'm imagining the html would look something like:

<h4 class="border caret-collapse" role="button" data-bs-toggle="collapse" href="#plinks">
  <span class="caret-collapse-container"></span>
  Plinks
</h4> 

As for the js, I'm guessing it would check for the click on the .caret_collapse and then do some kind of "child" lookup for the .caret-collapse-container and add/remove the icon code, but I've had no luck making something like that happen and thought I'd ask here instead of getting more frustrated.