Как передать нужное значение поля в форме, используя Ajax?

В html-шаблоне есть цикл for, в котором генерируются формы с уникальными значениями в поле:

{% for n in cities %}
    <form id="city_form" action="/" method='POST'>
        <input type="hidden" name="city_id" id="city_id" value="{{ n.id }}">
        <button  type="submit" name="city_button" id="city_button">{{ n.name }}</button>
        {% csrf_token %}
    </form>
{% endfor %}

Есть скрипт, через который передаются данные поля city_id:

<script>
    $(document).on('submit', '#city_form', function(e){
            
        e.preventDefault();
            
        $.ajax({
            type: 'POST',
            url: '/city',
            datatype: 'json',
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            data: {'city': $('#city_id').val()},
            success: function(data) {
                        $('.tbody').html(data.data);
                    }
            });
        });
    </script>

Все работает, но дело в том, что всегда передается одно и то же значение поля city_id, которое стоит первым в цикле for, какой бы город я не выбрал. Мне надо чтобы передавалось правильное значение выбранного города, а не всегда только значение первого, расположенного в цикле for.

Буду рад любым советам и ответам.

<script>
    $(document).on('submit', '#city_form', function(e){

        e.preventDefault();

        var $this = $(this);

        $.ajax({
            type: 'POST',
            url: '/city',
            datatype: 'json',
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            data: {'city': $this.prev().val()},
            success: function(data) {
                $('.tbody').html(data.data);
            }
        });
    });
</script>