{% for s in suggestions %}
<button type="button" class="suggestion"
        hx-post="{% url 'app-pantry-add' %}"
        hx-vals='{"ingredient_name": "{{ s.name|escapejs }}"}'
        hx-include="#add-location"
        hx-target="#pantry-items" hx-swap="innerHTML"
        hx-on::after-request="document.getElementById('add-input').value=''; document.getElementById('add-suggestions').innerHTML='';">
  {{ s.name }}
</button>
{% empty %}
{% if q %}
<button type="button" class="suggestion new"
        hx-post="{% url 'app-pantry-add' %}"
        hx-vals='{"ingredient_name": "{{ q|escapejs }}"}'
        hx-include="#add-location"
        hx-target="#pantry-items" hx-swap="innerHTML"
        hx-on::after-request="document.getElementById('add-input').value=''; document.getElementById('add-suggestions').innerHTML='';">
  + Add “{{ q }}”
</button>
{% endif %}
{% endfor %}