Two diagrams on same page about treant-js HOT 8 CLOSED

jQuery(function (jQuery) {
    var charts = jQuery('.stammbaum-chart');
    charts.each(create_treant);

    function create_treant(index, element) {
        element = jQuery(element);
        var person = element.attr('data-person');
        element.data('treant', new Treant(window.stammbaum['person-hierarchy-' + person], align_graph));
    }

    function align_graph(tree) {
        var tree_container = jQuery(tree.drawArea);
        var wrapper = tree_container.parent();
        var element = tree_container.find('.node').last();
        tree.drawArea.scrollLeft = parseInt(element.css('left')) - ((wrapper.width() - element.width()) / 2);
    }
});

<script>
	/* first tree  */
	config = { container: "#basic-example"};

	parent_node = {	text: { name: "First parent node" } };

	first_child = { parent: parent_node, text: { name: "First child" }};
	second_child = { parent: parent_node, text: { name: "Second child" }};
	
	simple_chart_config = [	config, parent_node, first_child, second_child ];

	var chart = new Treant( simple_chart_config );
	/* Here tree shows all 3 nodes */
	
	/* Second tree same container */
	config2 = { container: "#basic-example"};

	parent_node2 = { text: { name: "Second parent node" } };

	first_child2 = { parent: parent_node2, text: { name: "First child 2" }};
	second_child2 = { parent: parent_node2, text: { name: "Second child 2" }};

	simple_chart_config2 = [ config2, parent_node2, first_child2, second_child2 ];	

	chart = new Treant( simple_chart_config2 );
	/* Here tree shows only root node*/	
</script>

findChildren: function(nodes) {
		var parents = [0]; // start with a a root node
		...