Проблема jQuery ajax с несколькими формами на одной странице – всегда выбирает первую форму ⇐ Jquery

[Anonymous]

Я боролся с этой (скорее всего, простой) проблемой уже несколько дней. Буду признателен за любую помощь.
У меня есть страница с несколькими кнопками форм, на которых люди могут подписаться на мероприятия. Список кнопок формы создается динамически, и я различаю кнопки формы по значению event_id.
Похоже, что код jQuery всегда захватывает самое верхнее значение event_id на странице, а не event_id передается в форме.
Это внутри темы WordPress с использованием jQuery и Bootstrap. Каждый раз, когда я отправляю какую-либо кнопку, в консоли отображается, что event_id = 2528.
Любая помощь очень ценится, поскольку я перепробовал все, что думаю.
HTML



Sign Up




Sign Up




Sign Up



jQuery
jQuery(".join_race_form").validate ({
submitHandler: function(form) {
var event_id = jQuery('input[name="event_id"]').val();
var data = {
'action': 'join_race',
'event_id': event_id
};

jQuery.post(ajax.url, data, function(res) {
var response = JSON.parse(res);
var status = response.error;
var join = response.join;
var message = response.message;
var btn_type = response.btn_type;
if(status === false){
jQuery('#join_race_btn_'+ event_id ).text(join);
console.log(event_id);
}
});

return false;
}
});



Подробнее здесь: https://stackoverflow.com/questions/786 ... first-form