Php – AJAX Only Gets Values For Last Form Only

I am using AJAX to automatically update text inputs and textareas and save them to the database.

Everything works until there are two of form the same form. I figured out the AJAX function is taking the values from the form. I checked with console.log(data). I wonder if the last form is overriding everything.

It also works perfectly fine if all names are unique. However, my SQL code will have so much repetition and it won’t be efficient if the user makes 10 of these forms.

How can I make it so this doesn’t happen?

Thank you!

index.php

<form method="post" class="form-input">
    <input type="hidden" name="position" value="1" class="position">
    <table>
        <tbody>
            <tr>
                <td class="th">Offer Heading</td>
                <td><input name="heading" class="text-input" type="text"></td>
            </tr>
            <tr>
                <td class="th">Description</td>
                <td><textarea name="description"></textarea></td>
            </tr>
            <tr>
                <td class="th">Call-To-Action</td>
                <td><input name="call_to_action" class="text-input" type="text"></td>
            </tr>
        </tbody>
    </table>
</form>

script.js

    var timeoutId;
    $('textarea, .text-input').on('input propertychange change', function() {
        console.log('Textarea Change');

        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            // Runs 1 second (1000 ms) after the last change
            saveToDB();
        }, 1000);
    });
    
    function saveToDB() {
        console.log('Saving to the db');
        var data = $(".form-input").serialize();
        console.log(data);
        $.ajax({
            url: "",
            type: "POST",
            async: true,
            cache: false,
            data: data,
            success: function(data){
                console.log('completed');
            }
        });
    }
    
    $('.form-input').submit(function(e) {
        saveToDB();
        e.preventDefault();
    });

Thank you!