jquery - Creating multiple instances of dialog box -

i'm new jquery , java , i'm trying head round creating multiple instances of dialog box. i'm using in head:

 <script src="external/jquery/jquery.js"></script>  <script src="jquery-ui.js"></script> 

if have 1 button , and dialog box works. when add stops working. i'm sure quite easy fix i'm struggling.

        <h2>subjects</h2>          <button id="opener">maths</button>          <div id="dialog" title="dialog title">maths important subject.</div> <br>         <button id="opener">english</button>          <div id="dialog" title="dialog title">this important</div> <br>         <script>          $( "#dialog" ).dialog({ autoopen: false });         $( "#opener" ).click(function() {         $( "#dialog" ).dialog( "open" );                                          });         </script> 

http://jsfiddle.net/y7952dmf/

1. id must unique , therefore used class in order work several other elements of same time
2. to link button , dialog example, use data-id button , id dialog same value

html:

<h2>subjects</h2>  <button class="opener" data-id="#dialog1">maths</button> <div class="dialog" id="dialog1" title="dialog title">maths important subject.</div> <br>  <button class="opener" data-id="#dialog2">english</button> <div class="dialog" id="dialog2" title="dialog title">this important</div> <br> 

jq:

//create dialogue $(".dialog").dialog({     autoopen: false });  //opens appropriate dialog $(".opener").click(function () {     //takes id of appropriate dialogue     var id = $(this).data('id');    //open dialogue     $(id).dialog("open"); });