Class prefix as selector for each function

Question

I am able to do this using an ID prefix as the selector, but I need to be able to do it with classes instead. It's an each function for opening up different modal windows on the same page. I need to avoid using ID names because I have some modal windows that will have multiple links on the same page, and when using IDs, only the first link will work.

So here's the function as it works with IDs:

$('div[id^=ssfamodal-help-]').each(function() {
    var sfx = this.id,
        mdl = $(this),
        lnk = $('.link-' + sfx),
        cls = $('.ssfamodal-close'),
        con = $('.ssfamodal-content');

    lnk.click(function(){
        mdl.show();
    });
    cls.click(function(){
        mdl.hide();
    });
    mdl.click(function() {
        mdl.hide();
    });
    con.click(function() {
        return false;
    });
});

and I'm trying to change it to classes instead, like:

   $('div[class^=ssfamodal-help-]').each(function() {
        var sfx = this.attr('class'),
        etc.

But I cannot get it to work without using IDs. Is it possible?

EDIT Fixed error with semi-colon at end of Vars, and updated Fiddle with the fix. Still not working though.

Here's a Fiddle

** UPDATE **

To be clearer, I need to be able to refer to the same modal more than once on the same page. E.g.:

MODAL 1

MODAL 2

MODAL 3

MODAL 4

LINK TO MODAL 1

LINK TO MODAL 2

LINK TO MODAL 3

LINK TO MODAL 4

OTHER STUFF

LINK TO MODAL 1

LINK TO MODAL 4

LINK TO MODAL 3

OTHER STUFF

LINK TO MODAL 2

ETC.

Answer 1

When using classes get rid of the ID habit :

className1, className2, className3 ... etc

simply use

className

HTML:

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy
    </div>
</div>

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy Ho
    </div>
</div>

<span class="link-ssfamodal-help-base">One</span>
<span class="link-ssfamodal-help-base">Two</span>

LIVE DEMO

var $btn = $('.link-ssfamodal-help-base'),
    $mod = $('.ssfamodal-help-base'),
    $X   = $('.ssfamodal-close');

$btn.click(function(i) {
  var i = $('[class^="link-"]').index(this); // all .link-** but get the index of this!
  // Why that?! cause if you only do:
  // var i = $('.link-ssfamodal-help-base').index();
  // you'll get // 2
  // cause that element, inside a parent is the 3rd element
  // but retargeting it's index using $('className').index(this);
  // you'll get the correct index for that class name!

  $('.ssfamodal-help-base').eq(i).show()     // Show the referenced element by .eq()
  .siblings('.ssfamodal-help-base').hide();  // hide all other elements (with same class)

});
$X.click(function(){
   $(this).closest('.ssfamodal-help-base').hide();
});

_{From the DOCS:
http://api.jquery.com/eq/
http://api.jquery.com/index/
http://api.jquery.com/closest/}

Here I created a quite basic example on how you can create a jQuery plugin of your own to handle modals: http://jsbin.com/ulUPIje/1/edit
feel free to use and abuse.