Q:

Arrray of objects store same attributes in key

I'm creating a javascript array of objects. Inside the objects i want one key with all the attributes associated with that key in the same bucket. 
For example food[{fruits: 'apples', 'bananas'}, {spices: 'chili', 'cajun'}]
If the key is unique then add to the array otherwise just place in the same bucket. 
Code below
$('.options li').each(function() {
  $name = $(this).parent().attr('id');
  $attr = $(this).attr('data-attr');
  food[$name] = $attr;
});

Here is what i have code wise https://jsfiddle.net/fqyt18y7/

A:

Working Fiddle
To achieve this, you need to store each keyword with an array of its elements. Something like this should do the trick:
$('.options li').each(function() {
  $name = $(this).parent().attr('id');
  $attr = $(this).attr('data-attr');

  // Check to see if this keyword has been used before
  // because if not, we need to store an empty array there
  if(typeof food[$name] === 'undefined'){
    food[$name] = [];
  }

  // Add our element to that array
  food[$name].push($attr);
});

