Traversing XML with Jquery (Ajax) 2 Level structure

Ok, I have XML:

    <MainProject>
  <Teachers>
    <Teacher>
      <TeacherId>17</TeacherId>
      <TeacherName>Joe</TeacherName>
      <Courses>
        <Course>
          <CourseId>30</CourseId>
          <CourseName>Math</CourseName>
          <createdOn>2010-09-25T23:02:00.06</createdOn>
        </Course>
        <Course>
          <CourseId>31</CourseId>
          <CourseName>Physics</CourseName>
          <createdOn>2011-05-25T23:02:10.163</createdOn>
        </Course>
        <Course>
          <CourseId>32</CourseId>
          <CourseName>Algebra</CourseName>
          <createdOn>2010-09-14T23:02:17.227</createdOn>
        </Course>
      </Courses>
    </Teacher>
    <Teacher>
      <TeacherId>19</TeacherId>
      <TeacherName>Doe</TeacherName>
      <Courses>
        <Course>
          <CourseId>33</CourseId>
          <CourseName>Art</CourseName>
          <createdOn>2012-05-20T23:02:24.757</createdOn>
        </Course>
        <Course>
          <CourseId>34</CourseId>
          <CourseName>Science</CourseName>
          <createdOn>2011-06-23T12:40:25.4</createdOn>
        </Course>
      </Courses>
    </Teacher>
  </Teachers>
  <listCourses>false</listCourses>
</MainProject>

And I need only specific fields from this table:

1. TeacherName


2. CourseName

What I've come up:

var temp = "";
$(data).find('Teacher').each(function() {
    temp += $(this).find("TeacherName").text();
    temp += "<br />";
    temp += $(this).find("Courses > Course > CourseName").text();
    temp += "<br />";
    $("#test").html(temp);
});

The problem is: the CourseName - I want to separate by commas; Put it into 2 colunm table. How to make this magic? Please, open to any suggestions .