現在の画像に合わせてポップオーバーコンテンツを変更する

Question

現在表示されている画像に合わせてポップオーバーコンテンツを変更したいのですが、提供される最初の画像（a.jpg）のみが表示されます。現在の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'); 

私がしなければならなかったすべてが前のポップオーバーを破壊しました： '）