complex binding situation

complex binding situation

Hi all profs outside there,

I (relative beginner query) have a quite complex situation I have to resolve and couldn’t come through it:

Thats the function:

function appendTitles() {
var titles = ['title_1','title_2','title_3','title_4'];
$.each(titles, function(index,title){
var selwork=title.substr(6);
$('#foldout').append("<img id = "+title+" class='titles' src='images/"+title+".png'></img>")
.children().bind('click', {work:selwork}, workChoice)
}
);
}

What I tried here was:

1) in the first part (which works fine and is the code in regular character)
to create divs with a variable based id (to be animated elsewhere)

but :
2) I need to bind on each on this titles different click behaviors depending each on the id that it has.
For that (and for other reasons) I made the e.data function „workChoice“.
Yet, instead of giving to it a fixed data like „3“ for example (which will show work_3 besides other things always staying the same) I have to pass the data from the „title_x“ variable instead of a fixed value.

Now what I tried to code here (in bold character) always passes the value 4 to „selwork“ (selected work) giving it to all title divs behaviours.

How is this to be done correctly? Any ideas?
I need help with this

Thank you very much!

Garavani