Get ID of the element that was Bootstrap popover-ed

Question

I have the following Javascript code that represents an string of html elements:

html = '<tr>' +
'<td class="editMap" data-mode="option" data-wsid="'+row.option_id+
'" data-map="'+row.mapping_id+'" id="option-'+row.option_id+'">'+
'<span title="Options Mapping" data-toggle="popover" data-placement="left"style="cursor:pointer;">'+value+
'</span></td>'+'</tr>';

the html variable is actually inside a loop. I have as well the popover code that displays the details of a particular div

$('[data-toggle="popover"]').popover({
  html: true, 
  container: body,

  content: function() {
    return $('#popover-content').html();
  }
});

<div id="popover-content" class="row" style="display:none;">
  <input  class="btn btn-xs btn-info" type="submit" value="Yes" style="display: inline-block; vertical-align: top;"/>
  <input  class="btn btn-xs btn-primary" type="submit" value="No" style="display: inline-block; vertical-align: top;"/>
</div>

What I want is to actually get the id of the element that was popovered, which is in this case represented by "option-'+row.option_id+'". I have tried the following but it seems to not be working:

$('[data-toggle="popover"]').each( function() {
  $(this).popover({ 
    html : true,
    content: this.id,
    console.log(this.id);
  });
});

Please help me get the id. It might be an elementary level question but I'm new to Javascript

Answer 1

You need to access current element using $(this) instead of only this.

$('[data-toggle="popover"]').each( function() {
      //try doing console log out of popover.
      console.log($(this).attr('id'));
      $(this).popover({ 
                        html : true,
                        content: $(this).attr('id')
                     });
});