I am developing a group shopping cart that allows group user to order from the group page.

I have a product term page where user can buy all products at one time. In fact, they must have to buy all the products. Only they can modify is selecting option and quantity.

All is okay but I don't know how I can submit the form to the database using AJAX as my structure I have set is as below.

HTML Markup

<! -- while loop starts here .. -->

<ul class="gs-group-p-grid gs-group-product">
    <li class="gs-p-item">
        <div class="gs-p-item-container">
            <div class="gs-p-item-thumb">
                <a href="/?group_id=194" title="Ut dolores optio autem excepturi"><img src=".jpg" alt="product-list-thumbnail"></a>
            </div>
            <p class="gs-p-name">
                <a href="/?group_id=194" title="Ut dolores optio autem excepturi">
                    Ut dolores optio autem excepturi                                                        </a>
            </p>
            <label for="product_option[]" class="gs-label">Options</label><select name="product_option[]" id="product_option_172" class="gs-select-box"><option value="">Select option</option><option value="0">Blue</option><option value="1">Gray</option><option value="2">Orange</option><option value="3">Brown</option><option value="4">Rusty</option></select>                                                    <label for="qty_172" class="gs-label">Qty.</label>
            <input type="number" name="qty[]" id="qty_172" class="gs-number" min="1" step="1" value="1">
            <h4 class="gs-p-price">948,00 kr</h4>
            <input type="hidden" id="product" name="product[]" value="172">
        </div>
    </li>

    <li class="gs-p-item">
        <div class="gs-p-item-container">
            <div class="gs-p-item-thumb">
                <a href="/?group_id=194" title="Sequi eum qui sit"><img src=".jpg" alt="product-list-thumbnail"></a>
            </div>
            <p class="gs-p-name">
                <a href="/?group_id=194" title="Sequi eum qui sit">
                    Sequi eum qui sit                                                        </a>
            </p>
            <input type="hidden" name="product_option[]" value="">                                                    <label for="qty_80" class="gs-label">Qty.</label>
            <input type="number" name="qty[]" id="qty_80" class="gs-number" min="1" step="1" value="1">
            <h4 class="gs-p-price">470,00 kr</h4>
            <input type="hidden" id="product" name="product[]" value="80">
        </div>
    </li>

    <li class="gs-p-item">
        <div class="gs-p-item-container">
            <div class="gs-p-item-thumb">
                <a href="/?group_id=194" title="Sit iste voluptas commodi voluptatem inventore nesciunt"><img src=".jpg" alt="product-list-thumbnail"></a>
            </div>
            <p class="gs-p-name">
                <a href="/?group_id=194" title="Sit iste voluptas commodi voluptatem inventore nesciunt">
                    Sit iste voluptas commodi voluptatem inventore nesciunt                                                        </a>
            </p>
            <label for="product_option[]" class="gs-label">Options</label><select name="product_option[]" id="product_option_66" class="gs-select-box"><option value="">Select option</option><option value="0">38</option><option value="1">40</option><option value="2">42</option><option value="3">44</option><option value="4">46</option><option value="5">48</option></select>                                                    <label for="qty_66" class="gs-label">Qty.</label>
            <input type="number" name="qty[]" id="qty_66" class="gs-number" min="1" step="1" value="1">
            <h4 class="gs-p-price">200,00 kr</h4>
            <input type="hidden" id="product" name="product[]" value="66">
        </div>
    </li>

    <li class="gs-p-item">
        <div class="gs-p-item-container">
            <div class="gs-p-item-thumb">
                <a href="/?group_id=194" title="Fugit non saepe enim tempore sed quibusdam"><img src=".jpg" alt="product-list-thumbnail"></a>
            </div>
            <p class="gs-p-name">
                <a href="/?group_id=194" title="Fugit non saepe enim tempore sed quibusdam">
                    Fugit non saepe enim tempore sed quibusdam                                                        </a>
            </p>
            <input type="hidden" name="product_option[]" value="">                                                    <label for="qty_112" class="gs-label">Qty.</label>
            <input type="number" name="qty[]" id="qty_112" class="gs-number" min="1" step="1" value="1">
            <h4 class="gs-p-price">770,00 kr</h4>
            <input type="hidden" id="product" name="product[]" value="112">
        </div>
    </li>
</ul>

<!-- ... there is some code for buttons and hidden fields -->

<!-- while loop end here -->

HTML Output

$_POST Result

Of course, this way it will output an array for each name. So I don't understand how to submit this form in ajax so can insert record in below table structure.

product_option array has a fake value that doesn't match with above HTML. I have added just to demonstrate.

Array
(
    [product_option] => Array
        (
            [0] => 1
            [1] => 0
            [2] => 3
            [3] => 
        )

    [qty] => Array
        (
            [0] => 1
            [1] => 1
            [2] => 1
            [3] => 1
        )

    [product] => Array
        (
            [0] => 172
            [1] => 80
            [2] => 66
            [3] => 112
        )

    [group_id] => 194
    [_gs_nonce] => 43df85f3c6
    [_wp_http_referer] => /product-group/accusantium-et/?group_id=194
)

Table

My question is how can I submit this form with AJAX?

Logically, I can think is to process the array in below format than pass data manually in AJAX from PHP AJAX Callback function.

If this is possible but then
1. How to convert $_POST array in below format?
2. How exactly pass data from PHP ajax callback function to AJAX in JS?

Modify $_POST output

Array
{
    [0] => Array(
        [product_option] => 1
        [qty]            => 1
        [product]        => 172       
    )

    [1] => Array(
        [product_option] => 0
        [qty]            => 1
        [product]        => 80       
    )

    [2] => Array(
        [product_option] => 3
        [qty]            => 1
        [product]        => 66       
    )

    [2] => Array(
        [product_option] => 
        [qty]            => 1
        [product]        => 112       
    )
}