JQUERY $.parseXML gives me Invalid XML if my content has "&" in it

Question

Long Story short, I'm listing information my php code gets from our cafeteria website, and loading it into a html page with this jquery code:

 $.get(url, function(data, status){
      //make output into xml
      $output = $($.parseXML(test));

  });

The data is different everyday, I noticed that days where the data had the character "&" in it, the code wouldn't work. for example this data:

<?xml version="1.0" encoding="utf-8"?>
<doc>
    <station>
        <title>Comfort</title>
        <food>Baked Russet Potato</food>
        <food>Carne Asada</food>
        <food>Green Beans</food>
    </station>
    <station>
        <title>Deli</title>
        <food>American Cheese</food>
        <food>Black Olives</food>
        <food>Cheddar Cheese</food>
        <food>Chipotle Mayonnaise</food>
        <food>Chopped Fresh Spinach</food>
    </station>
</doc>

Would work completely fine, but if they had

<food>Brussels Sprouts & Carrots</food>

as one of the options in their menu, my code would break and give an "Uncaught Error: Invalid XML"

What's the best way to avoid this?

I could change my php to replace the "&" into "and", but that would add processing on my server and response time. But what's ideal for this situation?