Question: Hi I have a dynamically generated list of items generated by php mysql. 

Below a content section there is a link basically "Load Related" link in this case the content is a bunch of thumbnails. I dont want to load the thumbs with the list when the page loads, instead I want to load them with Ajax using JQuery.

The code below loads the data triggered by clicking an anchor "a.related" into one statically named div eg "div#pimgs" however it populates all divs named #pimgs

```
$('a.related').bind('click', function(e) {           
    var url = $(this).attr('href');
    $('div#pimgs').load(url);
    e.preventDefault();
});

<a class="related32" href="external-content.php?id=32"></a> 
<div id="pimgs32"></div>

```

I want to load data driven content into a dynimacilly named div eg"div#pimgs123" when you click an anchor named say "a.related123" or into a JQuery generated container directly below the anchor which is clicked.

Can someone help with this? Hope I'm making some sense...

Answer: 
Can you start from this?

```
$( 'a.related' ).bind( 'click', function( e ) {  
    var url = $( this ).attr( 'href' );
    var id = $( this ).attr( 'data-id' );
    $( 'div#pimgs' + id ).load( url );
    e.preventDefault();
} );

```

In your dynamically generated `<a>`, put the numbers into `data-id` attribute ([ref](https://www.google.com/search?q=data+attribute)).

So maybe:

```
 <a href="foo" class="related" data-id="<?php echo $id; ?>">bar</a>
 <div id="pigms<?php echo $id; ?>"></div>

```
[**demo**](http://jsfiddle.net/p4q6c/1/)

Don't use duplicate ID's.

```
$('a[class^="related"]').bind('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('class').split(' ').filter(function(v) {
        return v.indexOf('related') > -1;
    })[0];           
    var url = $(this).attr('href');
    $('#' + id).load(url);
});

```