Wordpress上でのjavascriptを使ったモーダルウィンドウで全記事が表示されてしまう

前提・実現したいこと

現在、続きを読むボタンをクリックするとモーダルウィンドウが開いて記事全文が読めるようになるといった機能をwordpress上で作成しています。ie8で確実に動く必要があるのですが、javascript及びjqueryにはほとんど触れたことがないため、以下のサイトのものを参考にして、作成しました。
[https://www.ericmmartin.com/projects/simplemodal/]

結果として上記URLのモーダルウィンドウ自体はwordpress上でも問題なく動きましたが、post-<?php the_ID(); ?>を使用した記事とモーダル間での紐づけがうまくいかず、モーダルを開くと作成したすべての記事の内容が表示されてしまいます。

以下コードです。 basic-modal-contentをidからclassに変更して、post-<?php the_ID(); ?>を追加した以外は元々のコードと変更はないです。

よろしくお願いいたします

該当のソースコード

php
1                    <?php  if(mb_strlen($post->post_content, 'UTF-8')>100) { ?>
2                        <div class="article-text">
3                            <?php the_excerpt(""); ?><br>
4                            <div id='container'>
5                            <div id='content'>
6                               
7                                <div id='basic-modal'>
8                                    <a href="#post-<?php the_ID(); ?>" class='basic'>...全文を読む</a>
9                                </div>
10
11                                <div class="basic-modal-content" id="post-<?php the_ID(); ?>"> 
12                                    <p class="modal-title"><?php the_title(); ?></p>
13                                    <p class="modal-date"><?php the_time('Y/m/d'); ?></p>
14                                    <p class="modal-article"><?php the_content(); ?></p>
15                                </div>
16                                    <img src='img/basic/x.png' alt='' />
17                            </div>
18                            </div>
19                        </div>
20                    <?php } else { ?>
21                        <div class="article-text">
22                            <?php the_content(); ?>
23                        </div>
24                    <?php } ?>  
25

css
1.basic-modal-content {
2    display:none;
3}
4
5#container {
6    display: inline-block; 
7}

js
1jQuery(function ($) {
2	// Load dialog on page load
3	//$('#basic-modal-content').modal();
4
5	// Load dialog on click
6	$('.basic').click(function (e) {
7		$('.basic-modal-content').modal();
8
9		return false;
10	});
11});

行動規範の内容に同意します

回答1件

ベストアンサー

同一HTML上でidは重複できません。もし提示のPHPがループ内にあるならそれをまず修正されることをお勧めします。

直近の.rticle-textを探してそこから要素を探すようにしてみてください。

js
1    $('.basic').click(function (e) {
2        $(this).closest('.rticle-text').find('.basic-modal-content').modal();
3
4        return false;
5    });