Вызов ajax показывает только входные значения для первого элемента в каждом цикле.Это нужно для отображения в зависимости от контекста нажатия кнопки

Question

Я пытаюсь отправить данные на контроллер, основываясь на контексте нажатия кнопки в каждом цикле. Ответ показывает только первую итерацию цикла.

@foreach($obj['questions'] as $question)
        <form class="col-md-12" id="upvote">
        <input type="hidden" value="{{$question->id}}" id="question_id" data-id="{{$question->id}}" class="form-control question_id">
        <input type="hidden" value="{{$user->id}}" id="user_id" data-id="{{$user->id}}" class="form-control user_id">
        <button class="btn btn-xs fas fa-arrow-up btn-submit" style="{{ in_array($question->id, $upvotes) ? 'color:gray' : 'color:orange' }}" {{ in_array($question->id, $upvotes) ? 'disabled' : null }}></button>
        </form>
@endforeach

А мой Ajax-скрипт выглядит так:

<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.btn-submit').click(function(e){
        e.preventDefault(); 
        var question_id = $("input[id=question_id]").val();
        var user_id = $("input[id=user_id]").val();
            $.ajax({
                url: "{{ route('welcome.upvoteAjax') }}",
                type: 'POST',
                data: {question_id:question_id, user_id:user_id},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                }
            });
        });
    });
</script>

Мой маршрут:

Route::post('/upvoteAjax', 'WelcomeController@upvoteAjax')->name('welcome.upvoteAjax');

И мой контроллер выглядит так:

public function upvoteAjax(Request $request){
   if($request->ajax()) {
      return response()->json($request);
   }
}

Ответ, который я получаю в консоли: (я также прикрепил скриншот браузера):

(index):593 {question_id: "736", user_id: "1"}
(index):593 {question_id: "736", user_id: "1"}
(index):593 {question_id: "736", user_id: "1"}

Это вывод независимо от того, какой элемент цикла я нажимаю. Вывод, который мне нужен, - это вопрос и пользователь, связанный с итерацией цикла, который отображается на внешнем интерфейсе. Любые отзывы будут оценены.

Спасибо.

Answer 1

После ссылки Ответ Адитьи и понимания того, как работают ссылки, я провел еще несколько поисков, и теперь это работает для меня

$('.btn-upvote').click(function(e){
   e.preventDefault(); 
   var question_id = $(this).parent().find('.question_id').val();
   var user_id = $(this).parent().find('.user_id').val();
       $.ajax({
           url: "{{ route('welcome.upvoteAjax') }}",
           type: 'POST',
           data: {question_id:question_id, user_id:user_id},
           dataType: 'json',
           success: function (data) {
               console.log(data);
           }
       });
});

Answer 2

Когда вы нажимаете кнопку отправки, вы выбираете значение из первого поля, в котором он находит пример

<input id="question_id">.

Лучшим способом решения этой проблемы будет вызов типов ввода элементов closeset для получения значения:

    var question_id = $(this).closest('.question_id').val();

Это позволит убедиться, что значения формы соответствуют вводу, который отправляет кнопка. Также идентификатор уникален для каждого элемента.

здесь попробуйте это:

let btns = document.querySelectorAll('.btn')
btns.forEach((btn) => {
    btn.addEventListener('click', function(event){
        event.preventDefault();
        let question_id =  btn.parentNode.children[0].value
        let user_id = btn.parentNode.children[1].value

        $.ajax({
                url: "{{ route('welcome.upvoteAjax') }}",
                type: 'POST',
                data: {question_id: question_id, user_id: user_id},
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                }
        })

    })
  })
}