So I'm trying to get the ID of the photo that a button is attached to (underneath) but am having some trouble.
I'm dynamically inserting using JavaScript innerHTML and it all works fine: Here's my code for creating the images as well as buttons and descriptions etc.
for (var i = 0; i < photos.length; i++) {
htmlStr += '<div class="images"> <figure> <a href="' + photos[i].largeURL +
'" data-lightbox="watches" data-title=' + photos[i].description + '><img src=' + photos[i].thumbnail + ' ' +
'alt=”Photo” width=150 height=150></a><figcaption>' + photos[i].description
+ "<br> total likes " + photos[i].likes + "<div id='btnDelete'><input type='button' onclick ='unlikePhoto(photos.id)'value='Like' id='btnDeleteID'></div>" + ' </figcaption></figure></div>'
//console.log(htmlStr);
}
The HTML:
<div class="imagesArea" id="imageArea">
<div class="images">
</div>
<div class="images">
</div>
What I'm having trouble figuring out is for each image dynamically inserted, how can I make the button press grab the id that is defined when creating the image dynamically? or even description etc.\
edit: Image: