append row to table from xml with jquery

i've a xml file this:

<?xml version="1.0" encoding="utf-8" ?>
<services>
  <service cat="one" title="title table one">
    <product code="001">
      <![CDATA[
        bla bla bla
      ]]>
    </product>
    <product code="002">
      <![CDATA[
        bla bla bla
      ]]>
    </product>
  </service>
  <service cat="one" title="title table two">
    <product code="001">
      <![CDATA[
        bla bla bla
      ]]>
    </product>
    <product code="002">
      <![CDATA[
        bla bla bla
      ]]>
    </product>
    <product code="003">
      <![CDATA[
        bla bla bla
      ]]>
    </product>
  </service>
</services>

I tried to get an html structure with "service title" repeated only one time, followed list of products, then the other "service title" etc. My problem is display the title correctly... this is my jquery (wrong) code

$(document).ready(function () {

        $.ajax({
            type: "GET",
            url: "xml/products.xml",
            dataType: "xml",
            success: function (xml) {

                $(".button").click(function (e) {

                    e.preventDefault();
                    $('#servtable').html("");

                    var myresult;
                    var myresulttitolo;
                    var title;

                    $(xml).find('service[cat=' + $(this).attr('id') + ']').each(function () {

                            title= $(this).attr('title');
                            myresulttitolo = ""

                            $(this).find('product').each(function () {                    

                                    var code = $(this).attr('code');
                                    var desc = $(this).text();

                                    myresulttitolo = '<tr><td style="text-align: center; padding: 15px;" colspan="2">' + title+ '</td></tr>';
                                    myresult += '<tr><td style="width: 80px; text-align: left; padding: 15px;">' + code+ '</td>';
                                    myresult += '<td width="max-width: 700px; text-align: left; padding: 15px;">' + desc+ '</td></tr>';

                            });

                        });

                        $('#servtable').append(myresulttitolo);

                        $('#servtable').append(myresult);

                });
            }

        });
});

any help?

Thanks!