Ändern Popover Inhalt nach aktuellen Bild

Question

Hallo Ich würde gerne meinen Popover Inhalt entsprechend der aktuellen Bild angezeigt ändern, aber es zeigt nur das erste Bild zur Verfügung gestellt (a.jpg). Ich möchte das Popup img nach der ändern aktuelle img src.

HTML:

<img id="popover" rel="popover" title="" data-content="" 
data-trigger="hover" class="img-circle" 
onmouseout="displaypreviousimage(this)" 
onmouseover="displaynextimage(this)" 
src="https://pbs.twimg.com/media/DOSczbmX4AAiFEd.jpg" 
width="300px"/> 

Javascript:

var images = [ 
     "https://img00.deviantart.net/e568/i/2013/177/b/2/hatsune_miku___last_night_good_night_by_vocalmaker-d6as4aq.png", 
     "https://i.scdn.co/image/e331fd3822f9691fbd707fb3e393bafd5fcf4b8a", 
     "https://germankpopinfo.files.wordpress.com/2016/10/bts-wings-album-cover.jpg" 
    ]; 

var counter = 0; 

function displaynextimage(x){ 
    var imghtml = ""; 
    if(counter < images.length) 
    { 
     x.src = images[counter]; 
     counter++; 
    } 
    else 
    { 
     counter = 0; 
     x.src = images[counter]; 
    } 
    if(x.src == images[0]) 
    { 
     imghtml = '<img src="a.jpg" width="150px">'; 
     $('#popover').popover({placement: 'right', content: imghtml, html: true}); 
    } 
    if (x.src == images[1]) 
    { 
     imghtml = '<img src ="b.jpg" width = "150px">' 
     $('#popover').popover({placement: 'right', content: imghtml, html: true}); 
    } 
} 

function displaypreviousimage(x){ 
    x.src = "https://pbs.twimg.com/media/DOSczbmX4AAiFEd.jpg"; 
} 

Answer 1

$('#popover').popover('destroy'); 
$('#popover').popover({placement: 'right', content: imghtml, html: true}); 
$('#popover').popover('show'); 

Alles, was ich war die vorherigen popover zerstören zu tun hatte: ')