画像クリックで拡大するポップアップのjQueryがうまく動作しない

実現したいこと

画像をクリックすると拡大して表示されるポップアップを実装したいのですが、クリックしたidとポップアップとして表示したいidの連携の記述方法がわからないためご教授いただけますと幸いです。

発生している問題・分からないこと

$(this)に該当するidのclassに'view'というクラス名を追加してポップアップの表示を行いたい

該当のソースコード

html

1 <div class ="item-wrapper">2 <div class ="pop-bg"></div>3 4 <div class ="item-content">5 <a href="#item1">6 <img src="img/url.jpg" alt="">7 <div class ="item-text">8 <p class ="item-name">商品名</p>9 <p class ="item-comment">サブタイトル</p>10 </div>11 </a>12 </div>13 14 <div id ="item1" class ="pop-wrapper">15 <img src="img/url.jpg" alt="">16 <p class ="pop-title">商品名</p>17 18 <div class ="close-btn"><i class="fa-solid fa-xmark"></i></div>19 </div>20 21 <div class ="item-content">22 <a href="#item2">23 <img src="img/url.jpg" alt="">24 <div class ="item-text">25 <p class ="item-name">商品名</p>26 <p class ="item-comment">サブタイトル</p>27 </div>28 </a>29 </div>30 31 <div id ="item2" class ="pop-wrapper">32 <img src="img/url.jpg" alt="">33 <p class ="pop-title">商品名</p>34 35 <div class ="close-btn"><i class="fa-solid fa-xmark"></i></div>36 </div>37 </div>

css

1/*--------ポップアップ表示---------*/2.pop-bg{3 width:100vw;4 height:100vh;5 position: fixed;6 background-color: rgba(0, 0, 0,.4);7 top:0;8 left:0;9 z-index: 100;10 cursor: pointer;11 opacity: 0;12 pointer-events: none;13 transition: .5s;14}15 16.pop-wrapper{17 position: fixed;18 top:50%;19 left:50%;20 transform: translate(-50%,-50%);21 z-index: 111;22 opacity: 0;23 pointer-events: none;24 transition: .5s;25}26.pop-wrapper img{27 width:50.78vw;28 height:33.91vw;29 object-fit: cover;30 border: white solid .5vw;31 position: relative;32}33.pop-wrapper .pop-title{34 color:white;35 text-align: center;36 margin-top:2.6vw;37}38 39.pop-wrapper .close-btn i{40 color: white;41 font-size:2.17vw;42 position: absolute;43 top:-3vw;44 right:0;45 cursor: pointer;46}47 48.pop-bg.view{49 opacity: 1;50 pointer-events: all;51}52 53.pop-wrapper.view{54 opacity: 1;55 pointer-events: all;56}57

jquery

1$(function(){ 2 $('.item-content a').on('click',function(){ 3 $('.pop-bg').toggleClass('view'); 4 5 var id = '#' + $(this).attr('href'); 6 $(id + '.pop-wrapper').toggleClass('view'); 7 }); 8 $('.pop-bg,.close-btn').click(function(){ 9 $('.pop-bg,.pop-wrapper').removeClass('view'); 10 }); 11})

試したこと・調べたこと

上記の詳細・結果

・ポップアップの背景('.pop-bg')は表示される
・idの連携を削除し、$('.pop-wrapper').toggleClass('view')のみ記載だと全てのポップアップ要素が重なってしまうが、きちんと表示がされる
・removeClass部分は問題なく動作している

補足

jQueryの知識が浅いため、不足している情報もあるかと思います。
助言をいただけましたらご対応させていただきますので、何卒よろしくお願い致します。