Bootstrapのpopoverで表示されるtitleとcontentの内容を動的に変更したい

Question

Bootstrapを使用してWebアプリケーションを作成していますが、その際に使用したいpopoversの動的な変更に苦戦しています。
1日ネットサーフィンしていましたが、調べ方が良くなかったのか理解が及ばなかったのか、中々良い方法が見つかりませんでした。
そこで、詳しい方にご教授願いたいと思い、久しぶりに質問させていただきます。

前提・実現したいこと

カレンダーの日付にあるボタンをクリックすることで、ボタンに設定してあるonclick属性のget_post(date)によりJavaScriptが呼び出され、その時にajaxから取得してきたJSONデータを、その日付の横から飛び出るpopoverで詳細な情報をポップアップしたいと考えています。

完成予定図

発生している問題

選択したボタンに対するpopoverのtitle属性(data-original-title属性？)とdata-content属性の値を変更したいのですが、どのようにそれを対応した各々のpopoverの場所に入れれば良いのか分かりません。

そこで「この要素に対して起動するから$(this)を使えば良いんじゃない？」という安直かつうろ覚えで使ってみたもののダメでしたし、例えば$('[data-toggle="popover"]')としてしまうと、全てのpopoverが起動してしまうし…。

ボタンを押したときに起動する、対応する日付のJSONデータをajaxで持ってくるところまでは成功していますが、その後のpopoverに入れる処理に困っています。

<table class="table">
	<tr>
		<th>日</th>
		<th>月</th>
		<th>火</th>
		<th>水</th>
		<th>木</th>
		<th>金</th>
		<th>土</th>
	</tr>
	<tr>
		<td></td>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td><button class="btn badge badge-danger rounded-pill calender" data-toggle="popover" title=""
				data-content="" data-date="2021-02-04" onclick="get_post('2021-02-04')">4</button></td>
		<td><button class="btn badge badge-danger rounded-pill calender" data-toggle="popover" title=""
				data-content="" data-date="2021-02-05" onclick="get_post('2021-02-05')">5</button></td>
		<td><button class="btn badge badge-danger rounded-pill calender" data-toggle="popover" title=""
				data-content="" data-date="2021-02-06" onclick="get_post('2021-02-06')">6</button></td>
	</tr>
</table>

//表示内容データ　例としてある1日のデータをサンプルとして持ってきています
data = [
	{
		"item": "アイテム01",
		"message": "説明文01",
	},
	{
		"item": "アイテム02",
		"message": "説明文02",
	}
]
//投稿
function get_post(date) {
	let text = "";
	for (let i = 0; i < data.length; i++) {
		text += data[i]["item"] + data[i]["message"];
	}
	$(this).attr("title", date);
	$(this).attr("data-content", text);
	$(this).popover('show');
}

そのボタンを押した日に対するpopoverの内容が更新されません。
もし良い方法があればご教授願います。よろしくお願いします????

補足情報（バージョン情報）

bootstrap/4.5.0/css
bootstrap/4.1.3/js
jquery/1.11.0
popper.js/1.14.3

Google Chrome ver.88.0

Answer 1

いまのコードだと、get_post()の中(直下)では、thisはwindowオブジェクトを指します。
押されたbuttonオブジェクトが欲しい場合は、get_post()の呼び方を変えれば良いと思います。

<button ... onclick="get_post(this, '2021-02-04')">

で、get_post()は、↓こんな感じです。

function get_post(btn, date) {
  ...
  $(btn).attr("title", date);
  $(btn).attr("data-content", text);
  $(btn).popover('show');
}

Comments

[k_shin]

ありがとうございます…！
get_post()の引数にthisを追加することで、思い通りの結果になりました。
gpsoftさん、対応していただき本当にありがとうございます????????

【補足】
私も間違えておりましたが、popoverのタイトル部分の変更は、
$(btn).attr("title", date); ではなく、
$(btn).attr("data-original-title", date);
でした。もしこの記事をご覧になった方の参考になれば。