submitting multiple forms on single click via Ajax

Question

I am submitting multiple forms on single button click.

eg 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);
            }
        });

    });
});