A reservation changes two parts of the page: the reservations table and the list of available cars. The `/reserve` response replaces only `#reservations`. Adding `HX-Trigger-After-Swap` to that response dispatches a named event after the swap, so the available-cars list can refresh too. section 6.2.3
Set the header to `update-available-cars-list`. The availability element listens for that event with `hx-trigger` and requests `/available`. To return both the rendered Qute template and the header, wrap the `TemplateInstance` in a `RestResponse` built with `ResponseBuilder`. section 6.2.3
Listing 6.13 Including the list of available cars in the index page
<h2>Available cars to rent</h2>
<form hx-get="/available" hx-target="#availability">
<p>Start date:<input id="startDateInput" type="date"
name="startDate" value="{startDate}"/></p>
<p>End date:<input id="endDateInput" type="date"
name="endDate" value="{endDate}"/></p>
<input type="submit" value="Update list"/>
</form>
<div id="availability" hx-get="/available" #1
hx-trigger="load, update-available-cars-list from:body"
hx-include="[id='startDateInput'],[id='endDateInput']">
<!-- To be replaced by the result of calling /available -->
</div>
The availability element listens for `update-available-cars-list from:body` and fetches `/available` when the event occurs. section 6.2.3
This refresh happens asynchronously after the reservations table changes; it does not update both tables simultaneously. Returning one template containing both tables is an alternative when they must change together. section 6.2.3
