Dynamic PHP JS

Hi I am trying to mash together a dynamic drop down content from Dynamic Drive with WordPress. I have the wordpress side of it working creating various tabs and content from child categories but I am struggling to make the JS side of it “Dynamic” Basically the code i currently have is

<? $var = ". $category->category_nicename."; ?>
<?php
$args=array('orderby' => 'id', 'order' => 'DESC');
$categories=get_categories('child_of=54'); foreach ($categories as $category) {
var defaultpanel=new ddpanel({
	ids: ["<? echo $var; ?>panel", "<? echo $var; ?>content", "<? echo $var; ?>tab"], // id of main panel DIV, content DIV, and tab DIV
	stateconfig: {initial: "0px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
	animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
	closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})  } ?>

The only bit that needs to be dynamic is the id’s at the top. I am using the same $categories=getcategories… etc in the template file. I’m pretty sure this can be done but not sure exactly how to make the php work within the JS. I have renamed the .js file .php and tried the above code!

Any thoughts greatly appreciated!

Thanks