How to get value of data-id Laravel

Question

I'm trying to get the value of the data-id which is on view. I'm trying to get the "data-reviewid".

This is my view.

Show.blade.php

<div class="container">
        <div class="row">
            <div class="col-md-6" id="user-reviews">
            <h3>Recent comments</h3>
                @forelse($product->reviews as $review)
                <div class="comment mt-5 border border-dark pl-3 pt-3 pb-3 mb-3 rounded reviewid" data-reviewid="{{ $review->id }}">
                    <div class="title">
                        <h4>{{ $review->headline }}</h4>
                    </div>
                    <div class="user-rating">
                        <star-rating class="pr-3" :star-size="20" :read-only="true" :show-rating="false" :rating="{{ $review->rating }}"></star-rating>
                    </div>
                    <div class="body-text pt-3 pr-5">
                        <p style="text-align:justify"><strong>{{ $review->description }}</strong></p>
                    </div>
                    <div class="body-text pt-3">
                        <h6>
                            <a href="#" class="btn btn-xs btn-warning like">Like</a>
                            <a href="#" class="btn btn-xs btn-danger like">Dislike</a>
                        </h6>
                    </div>
                    <div class="author pt-2">
                        <h6 class="text-muted">{{ $review->user_name }},  {{ date('d-m-Y', strtotime( $review->created_at )) }}</h6>
                    </div>
                </div>
                @empty
                <h6>There are not reviews for this product</h6>
                @endforelse
            </div>
        </div>
    </div>

And this is my JS file where I'm trying to get it, but every time I do a console.log in the reviewId it returns me as it's undefined.

App.js

$('.like').on('click', function(event) {
    event.preventDefault();
    reviewId = event.target.parentNode.parentNode.dataset['reviewid'];
    var isLike = event.target.previousElementSibling == null;

    $.ajax({
        method: 'POST',
        url: urlLike,
        data: {isLike: isLike, reviewId: reviewId, _token:token},
        success: function( data ) {
        },
        error: function(xhr, status, error) {
           // check status && error
        },
        dataType: 'text'
    })
    console.log(reviewId)
});

Now, I can get the data of the dataset, but now the problem is when I'm doing the POST request it's throwing me the next error:

POST http://localhost:8000/like 500 (Internal Server Error)
send @ app.js:12639
ajax @ app.js:12245
(anonymous) @ like.js:6
dispatch @ app.js:8222
elemData.handle @ app.js:8030

How can I see better this error?

Answer 1

Since using jQuery already is simple using closest() and data()

$('.like').on('click', function(event) {
    event.preventDefault();
    var revId = $(this).closest('.comment').data('reviewid')
   ....