How to make this work in IE?

How to make this work in IE?

The following snippet works in Firefox and Opera as expected, but not IE8. In Firefox or Opera, when I click button 1, it pops up 1a; click button 2, it pops up 2a and then 2b. I believe IE does not like those non-html tags. What is the best way to make this work? Is there a way to make this work without getting the XML portion through a separate ajax call?
  1. <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    function show(parent) {
            $("#" + parent + " bar").each(function() {
                    alert(this.id);
            });
    }
    </script>
    <body>
    <div style="display: none">
    <foo>
           <bar id="1">
                 <bar id="1a"></bar>
           </bar>
           <bar id="2">
                <bar id="2a"></bar>
                <bar id="2b"></bar>
           </bar>
    </foo>
    </div>
    <input type="button" onclick="show('1')" value="1" />
    <input type="button" onclick="show('2')" value="2" />
    </body>
    </html>