multiple jQuery simple modal boxes

Question

How would you utilize the jQuery simple modal box, for multiple instances on one page, with unique content for each description??

Would I use the .this function?

html:

    <div id='class-descriptions'>
      <a href='#' class='basic'>Description 1</a>
      <a href='#' class='basic'>Description 2</a>
      <a href='#' class='basic'>Description 3</a>
      <a href='#' class='basic'>Description 4</a>
    </div>

<div id="description1">description 1 content</div>
<div id="description1">description 2 content</div>
<div id="description1">description 3 content</div>
<div id="description1">description 4 content</div>

js:

jQuery(function ($) {
    // Load dialog on page load
    //$('#description').modal();

    // Load dialog on click
    $('#class-descriptions .class').click(function (e) {
        $('#description1').modal();

        return false;
    });
});

Answer 1

The first thing that you need to know it's fix the html code, you cannot use the same id for the divs, also you need to bind in some way the element a with the element div which have the content

<div id='class-descriptions'>
  <a href='#' id="description-1" class='basic'>Description 1</a>
  <a href='#' id="description-2" class='basic'>Description 2</a>
  <a href='#' id="description-3" class='basic'>Description 3</a>
  <a href='#' id="description-4" class='basic'>Description 4</a>
</div>

<div id="content-1">description 1 content</div>
<div id="content-2">description 2 content</div>
<div id="content-3">description 3 content</div>
<div id="content-4">description 4 content</div>

Assuming that each element a it's refered to each div that would be a modal, maybe the code should be like this

$(document).ready(function (){
    $('#class-descriptions .basic').click(function (e) {
        var aux = $(this).attr('id');
        aux = aux.replace('description','content');
        $(aux).modal();
    });
});

Answer 2

$('#class-descriptions .class') is wrong. Use .basic instead of .class