How to get value of fields in a repeating form with jQuery?

I have a form which is part of a foreach() loop that repeats on the same page for every user status that is displayed.

The form consists of a simple 'like' button that when pressed should send the data via AJAX to the controller.

At the moment, I am only trying to get the values of dynamic hidden input fields for status_id and user_id and I am failing.

Whenever I click the button on any status, it always returns the ID of the latest status in the database which is displayed first on the page.

I tried calling the ID of the form and then the class, then I tried calling the button directly and added the dynamic values inside the button tag as data-user and data-status, it always failed.

I have also tried different events on submit and on click - on click doesn't return anything but on submit returns the same status id everytime.

Also, if I wanna pass the data through AJAX, does it need a form? Can't I simply pass the data from the button on click directly?

This is the form

{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form', 'class' => 'likeform']) !!}
     {!! Form::hidden('like_status', $status->id) !!}
     {!! Form::hidden('user_id', Auth::user()->id) !!}
     <button type="submit" class="btn btn-info btn-xs like" data-user="" data-status="" id="like-status">
           <i class="fa fa-thumbs-up"></i> Like ()
     </button>
{!! Form::close() !!}

And this is the Javascript

$('.likeform').submit(function(e) {
    e.preventDefault();

    var status_id = $('.like').data('status');
    var user_id = $('.like').data('user');

    console.log(status_id + ' ' + user_id);
});

via Chebli Mohamed