submitting multiple forms on single click via Ajax

Question

I am submitting multiple forms on single button click.

e.g. suppose i have two forms. On button click, i can see $('form[id^=buyerForm]').length gives 2.

The first iteration picks first form data and make ajax call but second iteration also picks the first form data. This is the problem.

Can anyone please explain why iteration always picks first form data?

<script type="text/javascript">
    $("#jPdetails").on('click', function() {
        $('form[id^=buyerForm]').each(function() {
            post_form_data($(this).serialize());
        });
    });

        function post_form_data(data) {
            var jsellerAddress = $("#jsellerAddress").val();
            var jagentId = $("#jagentId").val();
            var jbuilding = $("#jbuilding").val();
            var junitId = $('#junitId option:selected').val();
            var jpropertyAed = $("#jppropertyAed").val();
            var jparkingBaysAt = $("#jparkingBaysAt").val();
            var jtotalAed = $("#jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };
</script>

html my html structure

<div id="jointBuyer" class="JointBuyerDive" style="display:none">
    <div id="jBuyer">
        <div id="inner"class="col-lg-6">
            <form id="buyerForm" role="form" method="POST" enctype="multipart/form-data">
        </div>
    </div>
<div>

and i'm adding multiple forms the following way

<script
    function addBuyer() {
        $("#addBuyer").click(function() {
            $("#buyerForm").clone().appendTo("#jointBuyer");
        });
    }
</script>

Answer 1

Never ever use ids in loops NEVER:

 $("#jPdetails").on('click', function() {
        $('form[id^=buyerForm]').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find("#jsellerAddress").val();
            var jagentId = $(el).find("#jagentId").val();
            var jbuilding = $(el).find("#jbuilding").val();
            var junitId = $(el).find('#junitId option:selected').val();
            var jpropertyAed = $(el).find("#jppropertyAed").val();
            var jparkingBaysAt = $(el).find("#jparkingBaysAt").val();
            var jtotalAed = $(el).find("#jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

or change all the ids to classes

 $("#jPdetails").on('click', function() {
        $('.buyerForm').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find(".jsellerAddress").val();
            var jagentId = $(el).find(".jagentId").val();
            var jbuilding = $(el).find(".jbuilding").val();
            var junitId = $(el).find('.junitId option:selected').val();
            var jpropertyAed = $(el).find(".jppropertyAed").val();
            var jparkingBaysAt = $(el).find(".jparkingBaysAt").val();
            var jtotalAed = $(el).find(".jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

or:

$("#jPdetails").on('click', function() {
    $('form[id^=buyerForm]').each(function(i,v) {

        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data:$(v).serialize(),
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});

Answer 2

I think you can reduce the code size to

$("#jPdetails").on('click', function() {
    $forms=$('form[id^=buyerForm]');
    $($forms).each(function(index) {
        // this will bind corresponding data for each form
        dataString=$($forms[index]).serialize();
        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data: dataString,
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});