I have the following code (simplified):

<div hx-post="/handle" hx-trigger="click from:.test1,.test2" hx-swap="outerHTML">
    <div class="checkboxes">
        <div>
            <input type="checkbox" id="checkbox1" class="test1" name="checkbox1" checked/>
            <label for="checkbox1">Test 1</label>
        </div>
        <div>
            <input type="checkbox" id="checkbox2" class="checkbox2" name="checkbox2" checked />
            <label for="checkbox2">Test 2</label>
        </div>
    </div>
</div>

The problem is that the request is only triggered if I click on test1 checkbox, if I click on the second nothing happens. I tried multiple syntaxes (including the one from this reddit post) but nothing works. I tried swapping the classes in the hx-trigger, it causes only the second checkbox to work, so it means only the first class is used. I could use the same class on all elements, but I want to figure out the way to specify multiple classes.