But you would only need the id of the image you want to change then? Not get all the id's and override all of them with the new picture.
That looks like bootstraps popover, it contains the input I take it and then attaches it to the image rows?
You can find the popover that is currently visible using jQuery and then read the image id on the row the popover belongs to.
By default the popover should be in a div like <div class="popover more classes here"
so you could find the active ones by doing $('div.popover:visible')
.
What might work even better, considering you're already passing the input element to the readURL function, is only to get the img that precedes the input, rather than all the images.
So something like:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$(input).prev("img.img-thumbnail")
.attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Where $(input).prev("img.img-thumbnail")
should find the thumbnail image that directly precedes the input field.