I’ve been struggling with this (most likely simple) issue for a few days. Any help would be appreciated.

I have a page with multiple form buttons on it for people to sign up for events. The list of form buttons is dynamically created and I’m differentiating the form buttons with the event_id value.

The jQuery code seems to always grab the topmost event_id value on the page, rather than the event_id passed within the form.

This is within a WordPress theme using jQuery and Bootstrap. Every time I submit any button it shows me in the console that the event_id = 2528.

Any help is really appreciated as I’ve tried everything I think.

HTML

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2528">
        <input type="hidden" name="event_id" id="event_id_2528" value="2528">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2528">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2526">
        <input type="hidden" name="event_id" id="event_id_2526" value="2526">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2526">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2523">
        <input type="hidden" name="event_id" id="event_id_2523" value="2523">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2523">Sign Up</button>
    </form>
</div>

jQuery

    jQuery(".join_race_form").validate ({
        submitHandler: function() {
            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;
        }
    });