replace URL with href in ajax - html

Question

Using following code to display text from another page
$.ajax({
url: 'topic/ginger.php',
success: function (data) {
data = $(data).find('div#display');
$('.res h2').html(data);
}
});
<a href="topic/ginger.php">
<div class="res" id="content" style="background-color:rgb(50, 190, 166)">
<h2></h2>
</div>
</a>
now i have two div with different href
<a href="topic/icecre.php">
<div class="res" id="content" style="background-color:rgb(224, 79, 95)">
<h2></h2>
</div>
</a>
<a href="topic/jelly.php">
<div class="res" id="content" style="background-color:rgb(92, 184, 92)">
<h2></h2>
</div>
</a>
As you see <a href="topic/ginger.php"> is url in ajax code, now i have two other div with different href so different url how do i sole this

Answer 1

$('.res').each(function(){
getAjax($(this).find("h2"), $(this).parent().attr('href'));
});
function getAjax(child, link)
{
$.ajax({
url: link,
success: function (data) {
data = $(data).find('div#display');
child.html(data);
}
});
}
Assuming all your divs are in the res class I would think this would do it, loops throught the res class and grabs the h2 inside it and the href of its parent and passes it to your ajax call to do the work. Havent tested it though.
EDITL just saw your newest edit, you cant have multiple items with the ID = "content" so get rid of them and give them each class ="res"