How can you retrieve XML parser on "click" on an SVG? : I have an SVG of the United States, and once you click on a specific state, the USA SVG fades out, and a separate SVG of the state clicked will appear (an enlarged version of the state). Each state has counties in it, with their own paths and id's. 

I have some testing XML parser that are supposed to go with each specific state. I'm trying to get it so once you click on a counties path, the specific XML data will alert you with the specific counties info. 

Here is my XML sample of just Los Angeles:

     var parser, xmlDoc;
    var xml = 
     "<Opportunities>
        <Opportunity>
            <State>CA</State>
               <County>Los Angeles</County> 
                 <TotalChildrenUnassigned>186</TotalChildrenUnassigned> 
        </Opportunity>
      </Opportunities>";


The SVG of California is too big, so here is just the path of Los Angeles: 

    <path
     style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke- 
     width:1;stroke-linecap:butt;stroke-linejoin:bevel;stroke- 
     miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
     d="m 361.25368,643.31194 -3.25507,-0.14099 -2.06586,-2.85131 -0.276,-0.49114 -1.00654,-3.58799 -0.91321,-6.41202 1.15265,0.43201 5.99874,11.719 0.4952,1.19145 -0.12992,0.14099 m -2.21199,-39.92283 -0.1827,-0.15004 -0.0365,-0.42292 0.0365,-0.0818 0.19888,0.0592 2.23634,0.84132 2.5042,2.25557 2.02936,1.82357 1.53823,1.4552 1.97659,4.58847 0.16237,0.47293 0.10965,0.98228 -0.19888,0.53207 -0.60472,0.39561 -0.0365,0.0182 h -0.34904 l -5.26817,-2.78765 -0.34904,-0.35016 -3.76647,-9.63169 m 55.39297,-67.34899 -2.78427,13.52435 -1.29472,7.81269 -0.97409,6.63939 -0.38556,2.8695 -2.81269,6.82132 -2.43114,4.55207 -0.97002,1.80538 -3.03995,1.6553 -1.09586,1.50068 -0.0731,0.40927 0.19886,0.92317 0.34906,0.55478 -5.74305,-1.47795 -0.49515,-0.12281 -1.9563,-0.14098 -4.61065,4.44295 -2.34188,3.30152 -1.11613,2.21008 -3.25508,0.4957 -3.42145,-0.0818 -1.57477,-0.69576 -0.78334,-0.49569 -3.05619,-2.2101 -0.54791,-0.50933 -0.32877,-2.06912 0.30846,-0.36834 0.99031,-0.82313 0.5114,-0.12282 0.2557,-0.59119 0.27192,-1.47793 -0.32469,-2.70579 -0.20293,-1.31424 -0.10954,-0.73671 -0.23542,-1.51886 -0.42209,-1.84631 -0.58852,-1.77808 -0.0528,-0.12736 -0.0731,-0.18645 -0.0202,-0.0365 -0.45457,-1.00502 -0.0932,-0.14095 -0.34501,-0.55481 -0.11352,-0.1819 -0.12572,-0.12735 -0.73463,-0.77763 -1.05932,-0.46841 -4.18858,-0.98681 -3.29158,-0.49113 -1.73713,0.16366 -6.47768,-3.21965 0.54794,-1.64167 4.17234,-2.0282 3.36466,-1.57799 5.04899,1.39611 2.56104,-4.57483 0.27599,-2.14644 -3.96939,-31.38255 -0.18271,-1.70077 51.03801,13.3652"
     id="Los Angeles"
     inkscape:connector-curvature="0" />

Using jQuery or JavaScript, how can I make it so once I click on a specific county, the specific "TotalChildrenUnassigned" data alerts? Let me know if there is any more information I can give to help, thanks. 