Jquery family tree

I'm interested in an HTML page that produces and displays the tree in the image, and an export to PDF as well. As you can see, a title should be displayed according to what they choose. The tree should always be displayed in its entirety (up to the 3rd Great Grand) even if there is blank data. From the moment enter the page The fields for filling the tree ( 7 fields) 1. Full name 1.1 Required field 2. Full name before married 2.1 is added to the place of the name in brackets " (born: full name)" 3. Choosing a family name 3.1 appears after the first square is produced. 3.2 This is a list of people who have already been added to the tree, each square adds a name. 3.3 A name that has 2 connections will not be listed 4. Family Relationship (Father, Mother)   4.1 The first time does not appear, because it is the top of the tree. 4.2 in the title of the square in the tree will appear according to the attached image (mother, father, grandfather, grandmother, Great grandfather , Great grandmother , 2nd Great grandfather ... ) * That's how you know who to link it to 5. Date of birth 6. Date of death 6.1 not shown in the first square 7. Wedding date. Abilities: 1. Add a square 2. Update a square 3. Delete a square 4. Export to PDF (including header and footer which I will provide later)