askama、jinjaのテンプレートエンジンのforループで生成された分のHTMLをJSのfor文で繰り返し処理できるようにする

Question

###解決したいこと

askama、jinjaのテンプレートエンジンのforループで生成（表示）された分だけのHTMLのテキストコンテンツと、それとは別で生成（表示）されるテキストコンテンツをJavaScriptのfor文を使って照らし合わせて、一致しているものはそのまま表示し、一致していないものは表示しないようにする方法を教えてください。

###該当するソースコード

これでdivタグがデータべースに元々ある値の数だけ表示されます。

{% for entry in entries %}
<div>
    (このdivタグが量産される)
</div>
{% endfor %}

例: データベースに3個の値があった場合。

{% for entry in entries %}
<div>
    <p>hogehoge</p>
    ...
</div>
<div>
    <p>hogehoge</p>
    ...
</div>
<div>
    <p>hogehoge</p>
    ...
</div>
{% endfor %}

このdivタグのテキストコンテンツと別でJSを使って自動生成される<p>タグのテキストコンテンツを一つ一つ照らし合わせて、値が同じであればそのまま表示し、違っていれば表示しないようにしたいと考えています。

{% for entry in entries %}
<div>
    <p>hogehoge</p>
    ...
</div>
<div>
    <p>HUGEHUGE</p>
    <!-- これは値が異なっているので表示しない。 -->
    ...
</div>
<div>
    <p>hogehoge</p>
    ...
</div>
{% endfor %}

<p id="other_content">hogehoge</P> <!-- JSを使ってid指定でテキストコンテンツを埋め込んだ<p>タグと比較する -->

自分で試したこと

askamaのテンプレートシンタックスでif文やmatch文があるのでそれを使って再現しようと思ったのですが、id指定でテキストを埋め込んでいたのでできませんでした。

比較対象のpタグにclass="db_val"を付与

var other_content = document.getElementById("other_content").textContent;
var arr = document.getElementsByClassName("db_val");

for (var i = 0; i < arr.length; i++) {
	if (arr[i].textContent != other_content) {
	arr[i].style.display = "none";
	}
}

上記のコードに書き換えて実行するとarrがclass指定なので、lengthは取れるのですが、中のテキストコンテンツが取れず、undefinedになり比較することができません。
なので実行すると本来は表示されるはずの要素まで、すべてが消えてしまします。

逆にarrをid指定にすると、中のテキストコンテンツは取れるのですが、lengthが取れずにundefinedになります。なのでdivタグにclass="node_count"をつけてノードを数えるためのdivを作った以下のコードを実行すると、

var other_content = document.getElementById("other_content").textContent;
var arr = document.getElementById("db_val"); //NEW
var node_count = document.getElementsByClassName("node_count"); //NEW

for (var i = 0; i < node_count.length; i++) { //NEW
	if (arr[i].textContent != other_content) {
	arr[i].style.display = "none";
	}
}

「Uncaught (in promise) TypeError: arr[i] is undefined」
とエラーが出ました。

Comments

[1T2R3M4]

https://qiita.com/haruka4434/questions/690a71fca6115b5e2312
https://qiita.com/haruka4434/questions/2d175c540422ab1e8632

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

{% for entry in entries %}
<div class="elements_group">
	<p>hogehoge</p>
</div>
<div class="elements_group">
	<p>HUGEHUGE</p>
</div>
<div class="elements_group">
	<p>hogehoge</p>
</div>
{% endfor %}

<p id="key_content">hogehoge</p>

<script>
	const keyContent = document.getElementById("key_content").textContent;
	const elementsGroup = document.getElementsByClassName("elements_group");

	for (let i = 0; i < elementsGroup.length; i++) {
		if (elementsGroup.item(i).children[0].textContent.trim() != keyContent) {
			elementsGroup[i].style.display = "none";
		}
	}
</script>