Tableau dynamique Jquery

Bonjour,
Je cherche a faire un tableau dynamique avec jQuery. Alors voila: j'ai trois tables rubrique, detailsrubrique (en relation avec rubrique) et chargeproduction (en relation avec detailsrubrique). A l'affichage, il faut une colonne Rubrique comprenant toutes les rubriques qui rowspan ses details correspondants. Voila a quoi doit ressembler l'affichage finale a faire et voila ce que j'ai resultat (ici la rubrique Intrants a deux details qui concernent les charges productions).

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

public function getWhereParcelle($codeparcelle) {
        $qb = $this->createQueryBuilder('cp')
            ->addSelect('cp.id as cp_id', 'cp.quantiteachetee as cp_qte', 'cp.prixunitaire as cp_pu', 'cp.typeExploitation as cp_type')
            ->leftJoin('cp.parcelle', 'p')->addSelect('p.code as p_code')
            ->leftJoin('cp.unite', 'u')->addSelect('u.id as u_id', 'u.nomUnite as u_unite')
            ->leftJoin('cp.detailsrubrique', 'dr')->addSelect('dr.id as dr_id', 'dr.libelle as dr_libelle') // dr => details charges
            ->leftJoin('dr.rubriquecharge', 'rc')->addSelect('rc.id as rc_id', 'rc.libelle as rc_libelle')
            ->where('p.code = :code')->setParameter('code', $codeparcelle)
            // ->groupBy('rc.libelle')
        ;
        return $qb->getQuery()->getArrayResult();
    }

        public function chargeProductionAction(Request $request) {
        $em = $this->getDoctrine()->getManager();
        $encoders = array(new XmlEncoder(), new JsonEncoder());
        $normalizers = array(new ObjectNormalizer());
        $serializer = new Serializer($normalizers, $encoders);

        if($request->isXmlHttpRequest()) {
            $codeparcelle = $request->request->get('id');

            $chargeproduction = $em->getRepository('ExploitationHorticoleBundle:PadChargeProduction')->getWhereParcelle($codeparcelle);

            $jsonContent = $serializer->serialize($chargeproduction, 'json');
            $response = new Response();
            $response->setContent($jsonContent);
            $response->headers->set('Content-Type', 'application/json');
            return $response;
        }
    }

    $(".tab-chargeproduction").click(function() {
            $(".table-chargeproduction > tbody").empty();
            console.log('tab-chargeproduction...');
            var codeparcelle = $(this).attr('rel');
            console.log('tab code ', codeparcelle);
            $.ajax({
                url: 'http://paden.local/admin/parcelles/chargeproduction',
                type: 'POST',
                data: { id : codeparcelle },
                success: function(data) {
                    console.log('Response ', data);
                    $.each(data, function(index, data) {
                        $(".table-chargeproduction > tbody").append(
                                "<tr>" +
                                        "<td rowspan='4' style='font-size: 17px;'>" + data['rc_libelle'] + "</td>" +
                                        "<td>" + data['dr_libelle'] + "</td>" +
                                        "<td></td>" +
                                        "<td></td>" +
                                        "<td></td>" +
                                "</tr>"
                        )
                    })
                },
                error: function(error) {
                    console.log('Error ', error);
                }
            });
        });

Ce que je veux

Je veux obtenir ce resultat

Ce que j'obtiens

Vu que j'utilise Symfony2 j'ai essaye de faire la requete en allant de la relation OneToMany mais j'ai toujours la rubrique qui se repete (du a mon foreach). Du coup j'obtiens ceci.