Multiple Forms on Page Submit Data for Specific One

I have a page that has multiple forms on it, when you submit one of the forms (via Ajax) it works, however when I submit any other form but that first one, it posts the data of the 1st form and not the 2nd form. I think it has something to do with the .each() function or to find that click to that form, but not sure how and I am stuck. Here is my code so far, any help would be greatly appreciated. TIA.

$(".mixForm").submit(function (event) {

event.preventDefault();
          
var headline =  $(".expHeadline").val();
var content = $(".expContent").val();
var vid = $(".IDv").val();
alert(headline);
 
// This does the ajax request
$.ajax({
    url: ajaxurl,
    method: 'post',
    data: {
        'action': 'enyc_add_exp_row',
        'head' : headline,
        'cont' : content,
        'vid' : vid,
        
    },
    success:function(data) {
        // This outputs the result of the ajax request
        alert('hi');
        console.log(data);
         $(".response").html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});  
  

});

>Solution :

I suppose .expHeadline, .expContent and .IDv are elements inside each forms ?

If so, there is no specific context for them so jQuery is using the first element he found on your dom, not on the submitted form.

Better target this elements with this on your function. this refered to the element targeted by the submit event

var headline =  $(this).find(".expHeadline").val();
var content = $(this).find(".expContent").val();
var vid = $(this).find(".IDv").val();