مشکل گرفتن data-id

سلام دوستان
من توی قسمت کامنتا فرم ارسال نظر پروژم یه چیزی مثل قسمت ارسال نظر سایت راکت درست کردم که روی ارسال نظر که میزنی یه textarea باز بشه ، بعد توی آموزش پروژه محور لاراول سایت راکت از modal استفاده شده برای ثبت نظر و با این اسکریپت ، data-id رو میگرفتن توی آموزش من برای این که data-id هارو بگیرم باید چیکار کنم رهنمیاییم کنید لطفا

$('#sendComment').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            let parent_id = button.data('id');
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('input[name="parent_id"]').val(parent_id)
        })

این هم کد html قسمت نظراتی که زدم

<div id="" class="container" style="margin-top: 20px;" dir="rtl">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link " id="nav-specification-tab" data-toggle="tab" href="#nav-specification"
                    role="tab" aria-controls="nav-specification" aria-selected="true">مشخصات</a>
                <a class="nav-item nav-link active" id="nav-comments-tab" data-toggle="tab" href="#nav-comments" role="tab"
                    aria-controls="nav-comments" aria-selected="false">دیدگاه</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade  " id="nav-specification" role="tabpanel" aria-labelledby="nav-specification-tab">
                <div class="container" style="height: 350px;">

                    <p class="col-7">
                        درحالی که هنر و کاردستی بیشتر یک فعالیت سرگرمی گونه و یک ارائه بی نقص از یک
                        تکنیک خلاقیت است. از جنبه‌های عملی انواع مختلف صنایع دستی به دلیل شباهت مورد
                        استفاده، همپوشانی زیادی
                    </p>
                </div>
            </div>
            <div class="tab-pane fade show active" id="nav-comments" role="tabpanel" aria-labelledby="nav-comments-tab">

                @auth
                    <div style="padding-left: 50px; padding-right:50px;">
                        <div class="row container ">
                            <div class="col-12">
                                <button class="btn btn-new-comment" onclick="showElem()" style="float: left;">افزودن
                                    دیدگاه</button>
                            </div>
                            @include('admin.layouts.adminErrors')
                            <div class="sendCommentBG container row col-12" id="ShowSendComment" style="display: none;">
                                <form class="col-12 row" action="{{ route('send.comment') }}" method="post"
                                    id="sendCommentForm">
                                    @csrf
                                    <input type="hidden" name="commentable_id" value="{{ $product->id }}">
                                    <input type="hidden" name="commentable_type" value="{{ get_class($product) }}">
                                    <input type="hidden" name="parent_id" value="0">

                                    <textarea class="form_address"
                                        style="height: auto; margin-bottom: 20px; margin-right: 15px; margin-left: 15px !important;"
                                        id="comment" name="comment" placeholder="دیدگاه خود را بنویسد" rows="4"
                                        cols="50"></textarea>

                                    <div class="col-12 text-left" style=" margin-bottom: 20px;">
                                        <button class="btn btn-cancel ml-2" onclick="hideElem()" type="button">انصراف</button>
                                        <button class="btn btn-send-comment"  data-id="0" type="submit">ارسال دیدگاه</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endauth
                @guest
                    <div class="alert alert-warning" style="border-start-start-radius: 10px; ">برای ثبت نظر لطفا وارد سایت شوید
                    </div>
                @endguest
                <h4 style="font-weight: bold; padding-right: 70px; padding-top: 10px; padding-bottom: 20px; ">دیدگاه
                    کاربران:
                </h4>
                <div style="padding-left: 50px; padding-right:50px;">
                    <div class="container comments ">
                        @foreach ($product->comments()->where('parent_id', 0)->get() as $comment)
                            <div class="commentUser">
                                @auth
                                    <button class="btn btn-reply-comment" data-id="{{ $comment->id }}" onclick="showElem()"
                                        type="submit">پاسخ</button>
                                @endauth
                                <div class="commenter">
                                    <span class="pb-2 pt-2" style="font-weight: bold; "
                                        id="blueCircle_icon">{{ $comment->user->name }}</span>
                                    <span class="text-muted">- دو دقیقه قبل</span>
                                </div>

                                <div class="card-body" style="font-size: 15px; padding-right: 30px;">
                                    {{ $comment->comment }}

                                    @foreach ($comment->child as $childComment)
                                        <div class="replyUser">
                                            <div class="commenter">
                                                @auth
                                                    <button class="btn btn-reply-comment" onclick="showElem()"
                                                        type="submit">پاسخ</button>
                                                @endauth
                                                <span class="pb-2 pt-2" style="font-weight: bold;"
                                                    id="blueCircle_icon">{{ $childComment->user->name }}</span>
                                                <span class="text-muted">- دو دقیقه قبل</span>

                                                <div class="card-body" style="font-size: 15px; padding-right: 30px;">
                                                    {{ $childComment->comment }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function hideElem() {
            document.getElementById("ShowSendComment").style.display = "none";
        }

        function showElem() {
            document.getElementById("ShowSendComment").style.display = "flex";
    </script>