Submitting two forms separately in one page with separate thankyou message

Question

I've a page which have two different forms:

Form 1:

<form id="info-form" method="POST" action="">
    <label for="name">What is your Name? </label> 
    <input required type="text" name="name" placeholder="Enter your full name here." />

    <label for="email">What is your email ID? </label>
    <input required type="email" name="email" placeholder="your.name@email.com" />

    <label for="mobile-number">What is your 10-Digit Mobile Number? </label>
    <input required type="text" name="mobile-number" maxlength="10" placeholder="Enter num." />

    <label for="posting-place">What is your current place of residence? </label>
    <input type="text" name="place" placeholder="Enter your current residing place here." />

    <button type="submit" class="btn btn-lg btn-success">
        Submit
    </button>
    <button type="reset" class="btn btn-lg btn-warning">
        Reset
    </button>
</form>

Form 2:

<form id="contact-form" method="POST" action="">
    <label for="name">What is your Name? </label> 
    <input type="text" name="name" placeholder="Enter your full name here." />

    <label for="email">What is your email ID? </label>
    <input type="email" name="email" placeholder="your email" />

    <label for="message"> Your Message: </label>
    <textarea id="message" name="message" rows="5" placeholder="Type in your message here"></textarea>

    <button id="submit_button" type="submit" class="btn btn-lg btn-success">
        Send
    </button>
    <button id="reset_button" type="reset" class="btn btn-lg btn-warning">
        Reset
    </button>
</form>

I then have these below thank you messages after the closing form tag of both the above two forms

Thank you message after submitting Form 1:

<div style="display:none;" id="thankyou_form">
    <p><em>Thank You</em> for submitting!</p>
</div>

Thank you message after submitting Form 2:

<div style="display:none;" id="thankyou_contact">
    <p><em>Thank You</em> for contacting! We will get back to you soon!</p>
</div>

I then have two script for displaying the thank you message on the same page after the form is submitted.

<script type="text/javascript">
    $(function () 
    {
        $('form').submit(function (e) 
        {
            e.preventDefault();
            $.ajax(
            {                   
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (response) 
                {
                    console.log(response);
                    if(response.result == 'success') 
                    {
                        // this is for the second form. For the 1st form ID is changed to thankyou_form
                        document.getElementById("thankyou_contact").style.display = "inline";
                    } 
                    else 
                    {
                        // this is for the second form. For the 1st form ID is changed to thankyou_form
                        document.getElementById("thankyou_contact").style.display = "none";
                    }
                }
            });
        });
    });
</script>

But when I submit the second form the thankyou message is also displayed is the first form . Also, the form is submitted twice .

Can you please inform me how to identify both the javascript separately? Or, Can I combine both the script into one but both submit buttons working independently of each other?

It would be very much helpful and also enlightening for me if you can point out my mistake.

PS I'm a beginner.

Edit1: The javascript code was modified (but currently non-working) as per suggestion from David. The new code is:

<script type="text/javascript">
            $(function () 
            {
                $('form').submit(function (e) 
                {
                    if(e.target === 'form#info-form')
                    {                   
                        e.preventDefault();
                        $.ajax(
                        {
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (response) 
                            {
                                console.log(response);
                                if(response.result == 'success') 
                                {
                                    document.getElementById("thankyou_info").style.display = "inline";
                                } 
                                else 
                                {
                                    document.getElementById("thankyou_info").style.display = "none";
                                    document.getElementById("sorry_info").style.display = "inline";
                                }
                            }
                        });
                    }

                    if(e.target === 'form#contact-form')
                    {                   
                        e.preventDefault();
                        $.ajax(
                        {
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (response) 
                            {
                                console.log(response);
                                if(response.result == 'success') 
                                {
                                    document.getElementById("thankyou_contact").style.display = "inline";
                                } 
                                else 
                                {
                                    document.getElementById("thankyou_contact").style.display = "none";
                                    document.getElementById("sorry_contact").style.display = "inline";
                                }
                            }
                        });
                    }
                });
            });
        </script>

Answer 1

Use event.target to determine which form is getting submitted, You need to refine your code as,

   if(response.result == 'success') 
   {
       // Determine if the submission came from "Info Form" or "Contact Form"
        if(e.target === 'form#info-form')
        {
           document.getElementById("thankyou_form").style.display = "inline";
        }
        else 
        {
           document.getElementById("thankyou_contact").style.display = "inline";
        }
   } 
   else 
   {
       // this is for the second form. For the 1st form ID is changed to thankyou_form
     document.getElementById("thankyou_form").style.display = "none";  
     document.getElementById("thankyou_contact").style.display = "none";
   }