I’m trying to swap multiple lists of elements using HTMX and Handlebars in 1 call but I cannot find the right solution.

Consider the following page:

<div class="flex-1 space-y-4">
    <h2>Recipes</h2>
    <div class="relative">
        <input
            type="text"
            placeholder="Search..."
            hx-get="http://localhost:5556/templates/menu/addRecipeList"
            name="search"
            hx-trigger="click,keyup"
            hx-target="#allRecipes"
            class="h-8 px-2 border border-gray-100 rounded shadow-md peer"
        >
    </div>
    <div class="flex-1 space-y-4">
        <ul
            id="allRecipes"
            class="border border-gray-100 rounded shadow-md absolute top-30 left-0 bg-white peer-placeholder-shown:hidden flex flex-col"
        >
        </ul>
    </div>
</div>
<div class="flex-1 space-y-4">
    <ul
        id="selectedRecipes"
        hx-get="http://localhost:5556/templates/menu/recipes"
        hx-trigger="load"
        hx-target="this"
        class="border border-gray-100 rounded p-4 shadow-md space-y-4"
    >
    </ul>
</div>
<div class="flex-1 space-y-4">
    <h2>Ingredients</h2>
    <ul
        id="ingredients"
        hx-get="http://localhost:5556/templates/menu/ingredients"
        hx-trigger="load"
        hx-target="this"
        class="border border-gray-100 rounded p-4 shadow-md space-y-4"
    >
    </ul>
</div>

It contains 3 things. First, a trivial dropdown list made of an input and a list of items that opens when at least 1 character is typed. There’s also a list of recipes, and a list of ingredients containing all the ingredients of the menu.

The dropdown list with recipes to choose gets its html from the backend. It looks like multiple lis like this:

<li>
    <button
        class="px-4 py-2 hover:bg-gray-50"
        hx-post="http://localhost:5556/templates/menu/1/recipes/2"
        hx-trigger="click"
    >
        recette 2
    </button>
</li>

When clicking the button, a POST call is made to add the clicked recipe to the menu. Also, it updates the recipes and ingredients lists (I wish I could separate these concerns into 3 distinct calls but it does not seem to be the way to do it in HTMX). It does not have a target. Since I want to provide my page with multiple templates in 1 request and hx-target can only provide 1 template to all its targets, I have to use hx-swap-oob, which enables me to target different parts of the page.

This is where I’m stuck.

I tried returning multiple lis with id="recipes" or id="ingredients" and hx-swap-oob="true", but I cannot make it work. For example, when using the beforeend strategy, it only adds items to the existing template, whereas I want the existing html to be replaced. When using the innerHTML strategy, it replaces the existing html, but this applies to each li one by one, which means that each li replaces the one that was just swapped in the html, and in the end I only have the last li displayed.

I thought about wrapping my lis in an ul, but the problem is that I would have to replace the ul of my page which has some properties such as tailwind classes that I do not want to lose. I could copy paste the classes from the page template to the template that is returned when swapping the recipes/ingredients, but this feels really hacky and uncomfortable, and I fear the technical debt that such workaround would create.

I played with the swap strategies, both on the ul being replaced and on the lis being added, but I could not find a satisfying solution.

I am already uncomfortable having a POST route make an upsert in the database then return 2 different templates all in 1 call, and really start questioning the value of HTMX. I see how it simplifies lots of logic, but I also see how it seems rigid in some situations, which defeats its simplicity.

I would very much appreciate if someone could give me a solution to this problem, that would not be a hacky workaround.