multiple jquery modal dialogs

[B34ST]

Hi i have been using the jquery.form plugin for jquery to create a form within a modal dialog. I can do this succesfully and process the form afterwards however i want to use multiple dialogs on the same page.

 

here is the javascript i am using

 

<script type="text/javascript">
	$(document).ready(function()
	{
		$('#layer1').Draggable(
				{
					zIndex: 	20,
					ghosting:	false,
					opacity: 	0.7,
					handle:	'#layer1_handle'
				}
			);	
		$('#layer1_form').ajaxForm({
			target: '#content',
			success: function() 
			{
				$("#layer1").hide();
			}				
		});			
		$("#layer1").hide();

		$('#user_info').click(function()
		{
			$("#layer1").show();
		});

		$('#close').click(function()
		{
			$("#layer1").hide();
		});
	});
</script>

 

with this html:

<div id="content"><a href="#" id="user_info">edit</a></div>
<div id="layer1">
	<div id="layer1_handle">			
		<a href="#" id="close">[ x ]</a>
		User information
	</div>
	<div id="layer1_content">
		<form id="layer1_form" method="post" action="save_settings.php">
			Username<input type="text" name="username" /><br />				

			<input type="submit" name="submit" value="Save" />
		</form>
	</div>
</div>

 

I can get multiple dialogs to work by simply adding the same javascript and html with different id's e.g. layer2

 

I was wondering if there was an easier way to do this for example maybe use a wildcard number at the end so it will look for layer and can then pass any number after that as an id to display the relevant form? I can easily duplicate the html side by using a for loop in php grabbing the relevant form details from my db but i am trying to avoid having to duplicate the js for each dialog.

 

thanks for any help in advance