Using AJAX to update multiple data

Hi guys,

I seem to have a problem with a code I am trying to write.

I have a Dummy Product (parent) product that has 3 Grouped Products (child) underneath it. I made a Parent Product page that shows all child products also.

The thing is, each child product has options (i.e. small, medium, large). I have one Add to Cart button. But when I click on it, only the last Child Product listed is added to the cart. I am trying to get all 3 child products and their options to be added to the cart via that one Add to Cart button.

Here is the snippet I made for it...

<a href="#" onclick="return $(this).getForm().sendRequest(
'shop:on_addToCart', {
onSuccess: function(){alert('The product has been added to your cart.')},
extraFields: {product_id: '<?= $grouped_product->id ?>'},
update: {'mini_cart': 'shop:mini_cart'}
});">Add to Cart</a>

Is there any way i can make ALL child products be added to the cart?

Thanks for any input.

If you've got a JS code issue, post the generated JS code, not the server-side code.

Also, we probably need to see your HTML structure.