In this example, an event called "gather" is used to gather all fruits into an array.
The event is called on each of the fruit spans.
The fruit spans return the text inside of them when they receive the gather event.
The events then bubble up to the getherer.
The gatherer responds to the gather event by taking the result returned by the gather handler for the fruit and appending it to an array stored using jQuery's data function.
The gather event is triggered on the fruits by clicking the gather button.
After the events complete, the click handler for the gather button takes the array from the gatherer, serializes it to JSON, and displays it in a span next to the button.

The gatherer div has a red border.

fruit vegetable