Implementing magicpreview jQuery script

I try to implement this jQuery script http://rikrikrik.com/jquery/magicpreview/ in order to allow a dynamic preview of my form. The script works on a static html site but not with my local wordpress/gf installation.

I placed the script in my header file:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.magicpreview.js"></script>

and I placed the gform render hook underneath it as well:

<script type="text/javascript">

jQuery(document).bind('gform_post_render', function(){

    // code to trigger on AJAX form render
		$(function () {
			// Example 1
			$('form.example input:text').magicpreview('mp_');

			// Example 2
			$('form.photopreview :text').magicpreview('mp_');
			$('form.photopreview :checkbox').magicpreview('mp_');
			$('form.photopreview textarea').magicpreview('mp_');
			$('form.photopreview select').magicpreview('mp_');

			$('form.photopreview :radio').magicpreview('mp_', {
				'formatValue': function (value) {
					return value;
				}
			});
		});

});

</script>

On my form I used a simple multiple choice field (name tags input_1, input_2, ...) and a html block in which I put the corresponding div tags for the magical preview script (<div id="mp_input_1"><div id="mp_input_2" ...).

When I click on one of the choices its value should be displayed in the div tag. but well...actually nothing happens. thanks for following me so far. any helf would be much appreciated.

EDIT: PS. I'm sorry but by the time being I can't provide a link to live site. it's all on my local test environment.

hi david,

thanks for getting back to me. I set up a live site here: http://l3s11023.zeus03.de/test/
is there any way I can email you the login data (if it should be necessary)?

Hi David,

thank you so much! I really appreciate it. but I've got two more questions:

(1) sometimes it seems that the script doesn't work at the first page...but when I get to step two and then go back the preview values suddenly appear.

(2)what I want to do is using gf as a product configurator and the dynamic preview should show, which components are already selected. but when I go to the second page and insert the same <div> containers as in the html block on the first page, the values from the first page aren't displayed.

is there a way that the script stores the values from the first page?

I updated the live site with the code you provided me: http://l3s11023.zeus03.de/test/

thanks again for your outstanding support!

outsourcing the preview out of the form itself works nicely...thank you :)

unfortunately my first point remains. if I empty my cache and visit the page with the form for the first time the script doesn't seem to be fired of on the first page. again: when I move on to step two the preview is displayed (same on the first page when I move back now).