HTMX pass parameter to hx-put (or hx-get) for searching one item and fill the edit form

How to pass id for search data using hx-put='http://localhost:0001/site/3', where 3 have been a dynamic value (it is a line in a grid). I use it with JavaSprngBoot on backend.

                  <tr th:each="model : ${models}">
                        <th scope="col">
                            <button type="button" title="Edit"
                                    class="btn btn-outline-primary"
                                    hx-put=/openai/model
                                    hx-vals=js:{"id":${model.getId()}}
                                    hx-target="body"
                                    hx-trigger="click">
                                <i class="bi-pencil"></i>
                            </button>
                            <button type="button" title="Delete"
                                    class="btn btn-outline-danger">
                                <i class="bi-trash"></i>
                            </button>
                        </th>
                        <th scope="row" th:text="${model.getId()}"></th>
                        <td th:text="${model.getModel()}"></td>
                        <td th:text="${model.getPrice()}"></td>
                        <td th:text="${model.getLimit()}"></td>
                        <td th:text="${model.getCreatedAt()}"></td>
                    </tr>

I need pass data from the edit-form, in ideal it works, when I pass data by hardcode - not dynamically. And ALL examples, which I seen later, was with hardcode values.So sad((

Solution

I solved this problem: I added name="id" th:value="${model.getId()}" to my button, and it works for my case.

                  <tr th:each="model : ${models}">
                    <th scope="col">
                        <button type="button" title="Edit"
                                class="btn btn-outline-primary"
                                name="id" th:value="${model.getId()}"
                                hx-put=/openai/model
                                hx-target="body"
                                hx-trigger="click">
                            <i class="bi-pencil"></i>
                        </button>
                        <button type="button" title="Delete"
                                class="btn btn-outline-danger">
                            <i class="bi-trash"></i>
                        </button>
                    </th>
                    <th scope="row" th:text="${model.getId()}"></th>
                    <td th:text="${model.getModel()}"></td>
                    <td th:text="${model.getPrice()}"></td>
                    <td th:text="${model.getLimit()}"></td>
                    <td th:text="${model.getCreatedAt()}"></td>
                </tr>

All the suggested in a discussion answer options look useless without real code fragments, only with links to documentation, where the working answer itself is also not shown. The proposal, where suggested to change the endpoint on the backend, looks absurd, since the backend is sometimes developed separately from the client side, and teams may not have any connections at all.

HTMX - a technology that does not need JavaScript? However, it turns out that without JavaScript or adding a separate handler, we cannot solve such an elementary task as adding a value into an endpoint URL. Hmm..