bootstrap popover change content dynamically

Question

Click me First button represents purchase in real life, on it's click product_buy_now() is fired.. it fills following arrays:

news_from_to
number_of_news
news_price_data

after data is set inbox_open() is fired which set up popover's title & data-content attributes.. it really should work.. sample code that doesn't use dynamically filled arrays: https://jsfiddle.net/HopeLess/0gbcatL3/ check it just to see how result should look like. Thanks for all help in advance (:

<!-- HTML -->
<button class="btn btn-sm btn-danger" style="margin: 40px 0 0 0;" onclick="product_buy_now()">Click Me First</button>
<button id="inbox" class="btn btn-primary btn-sm" style="margin: 40px 0 0 400px;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox</button>

<!-- Script -->
<script>
// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var news_from_to = [];
var number_of_news = [];
var news_price_data = [];

// inbox.open
function inbox_open(news_from_to, number_of_news, news_price_data) {
 console.log("Opening Executed!");
 console.log("");

 console.log("Craft Data:");
 console.log(news_from_to);
 console.log(number_of_news);
 console.log(news_price_data);
 console.log("");

 for(var i = 0; i < news_from_to.length; i++) {
  // create header/content components
  var b = document.createElement("button");
  var c = document.createElement("span");

  b.innerHTML = (i + 1);
  b.className = "poH";

  c.className = "poC";
  c.style = "display: none;";

  // set price
  var news_price_of_items = 0;
  for(var j = news_from_to[i]; j < (news_from_to[i] + number_of_news[i]); j++) { news_price_of_items += news_price_data[j]; }

  // insert data
  c.innerHTML = "You Bought: <br />"+
                number_of_news[i]+ " items <br />"+
                "for $"+ news_price_of_items;

  // store popover header/content
  poH.appendChild(b);
  poC.appendChild(c);
  }
 inbox.setAttribute("title", poH.innerHTML);
 inbox.setAttribute("data-content", poC.innerHTML);

 console.log("Craft as Crafted:")
 console.log(poH.innerHTML);
 console.log(poC.innerHTML);
 }

// run inbox_open()
//inbox_open(news_from_to, number_of_news, news_price_data);

// aloud BS 4 popover to run
$(document).ready(function() { $('[data-toggle="popover"]').popover(); });


/* PRODUCT BUY NOW */

// data for Buy Now
var now_cart_item = [];
var now_cart_in_item = [];

// product.buy_now
function product_buy_now() {
 // inbox.update
 if(news_from_to.length == 0) {
  console.log("if branch:");
  console.log("");
  news_from_to = [0];
  number_of_news = [1];
  /* news_price_data = [product_price_data[now_cart_item[0]][now_cart_in_item[0]]]; */
  news_price_data = [10];

  inbox_open(news_from_to, number_of_news, news_price_data);
  }
 else {
  console.log("else branch:");
  console.log("");
  news_from_to.push(news_price_data.length);
  number_of_news.push(1);
  /* news_price_data.push(product_price_data[now_cart_item[0]][now_cart_in_item[0]]); */
  news_price_data = [20];

  inbox_open(news_from_to, number_of_news, news_price_data);
  }

 // mail purchase info
 //now_mail();

 // empty data holders for next purchase
 now_cart_item = [];
 now_cart_in_item = [];
 }

/* JQUERY */

// BS 4 popover header buttons.addEventListener
$('#inbox').on('shown.bs.popover', function () {
 // get header/content classes
 var poHs = document.getElementsByClassName("poH");
 var poCs = document.getElementsByClassName("poC");

 for(var i = 0; i < poHs.length; i++) {
  popover_hardCodeHandler(i);
  }
 poHs[0].className += " seen active";
 poCs[0].style = "display: block;";
 }
);

function popover_hardCodeHandler(i) {
 var poHs = document.getElementsByClassName("poH");
 var poCs = document.getElementsByClassName("poC");

 poHs[i].onclick = function() {
  // remove active class from all poHs and set display none for all poCs
  for(var j = 0; j < poHs.length; j++) { poHs[j].className = poHs[j].className.replace(" active", ""); }
  for(var j = 0; j < poCs.length; j++) { poCs[j].style = "display: none;"; }

  // add seen and active class to current element
  this.className += " seen active";

  // set content for current element
  poCs[i].style = "display: block;";
  }
 }
</script>

Answer 1

Answer to my question is that inside inbox_open() you should use inbox.setAttribute(" data-original-title ", poH.innerHTML); because that is where BS 4 looks for title in this kind of situations (: