Product page tab - content of tab is not displayed correctly

[Real_Power_JP]

Hi, I created tabs on the product page using HTML at the back end of "product".

The button for "Dog Food Formula Comparison" (ドックフードフォーミュラ比較) is displaying correctly, but the content of the tab is not showing. Can you please help me?

The HTML script I created:

Button:

<button class="tablinks" id="defaultOpen" onclick="openCity(event, 'ドックフードフォーミュラ比較')"><strong>ドックフードフォーミュラ比較</strong></button>

Content of the tab:

<div class="tabcontent" id="ドックフードフォーミュラ比較">REAL POWERの選び方が分からない？ <br>フォーミュラの比較を見てみましょう！<br> <br> <span style="font-size: 18px;">ペットの“主な問題”に合わせて選びましょう！<br>愛犬の状態に合わせて最適なReal Nature Recipeのフォーミュラを選択します。</span><br><img src="https://cdn.shopify.com/s/files/1/0751/1988/6621/files/230822-Compare-dog-JP.jpg?v=1692690012" alt="ドックフードフォーミュラ比較" style="display: block; margin-left: auto; margin-right: auto;"></div>

The content of the tab should be showed like this:

But the page is displayed like this currently:

There is nothing showed under the tab of "Dog Food Formula Comparison (ドックフードフォーミュラ比較)"...

[SomeUsernameHe]

Is there a way I could see what it looks like now on the site? 

[Real_Power_JP]

It looks like this. There is nothing displayed under the tab of "Dog Food Formula Comparison (ドックフードフォーミュラ比較)".

There are contents displayed under other tabs and I am using the same script.