I have modal in my looped data and in that modal I save related data to each item, the problem is that it only saves data for first item in the loop and for other items it returns ""

sample code:

@section('content')
<div>
    <table >
        <thead>
          <tr>
            <th >Name</th>
            <th >Button</th>
          </tr>
        </thead>
        <tbody>
            @foreach($items as $item)
            <tr>
                <td>{{$item->name}}</td>
                <td>
                    <button type="button"  data-toggle="modal" data-target="#editModal-{{$item->id}}">Add Data</button>
                </td>
                <!-- item modal -->
                <div  id="editModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                    <div  role="document">
                        <div >
                            <div >
                                <h5  id="editModalLabel">Add Data To "{{$item->name}}"</h5>
                                <button type="button"  data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form>
                            <div >
                                <div  id="myTabContent">
                                <div >
                                    <div >
                                        <label for="question">Question *</label>
                                        <input type="text"  id="Qquestion" name="question">
                                    </div>
                                    <div >
                                        <label for="note">Note</label>
                                        <input type="text"  id="Qnote" name="note">
                                    </div>
                                    <div >
                                        <label for="correctAnswer">Correct Answer</label>
                                        <input type="text"  id="QcorrectAnswer" name="correctAnswer">
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div >
                                <button type="button"  data-dismiss="modal">Cancel</button>
                                <button type="button"  data-id="{{$item->id}}">Save</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- item modal -->
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection


@section('scripts')
<script>
    $(document).ready(function() {
        $('.saveQuestion').on('click', function(e) {
            e.preventDefault();
            $.ajaxSetup({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });
            var Qquiz_id = $(this).attr("data-id");
            var Qquestion = $('#Qquestion').val();
            var Qnote = $('#Qnote').val();
            var QcorrectAnswer = $('#QcorrectAnswer').val();

            console.log('1', Qquiz_id)
            console.log('2', Qquestion)
            console.log('3', Qnote)
            console.log('4', QcorrectAnswer)
            $.ajax({
                url: '{{ route('addQuestion') }}',
                type: 'POST',
                data: {
                    quiz_id: Qquiz_id,
                    question: Qquestion,
                    note: Qnote,
                    correctAnswer: QcorrectAnswer,
                },
                success:function(data) {
                  console.log('data', data);
                  $('#Qquestion').val('');
                  $('#Qnote').val('');
                  $('#QcorrectAnswer').val('');
                }
            });
        });
    });
</script>
@endsection

So if for instance I have 2 items with id 1 and 2, when i open modal for id 1 and i put data it saves the data. But when i open modal for item with id 2 and try to save data it return my input values as ""

Here is console screenshots:

Saving data for item id 1

Saving data for item id 2

Any idea?

CodePudding user response：

You need to add Item id to Question, Quiz and Correct Answer.

Just like:

<div >
  <label for="question">Question *</label>
  <input type="text"  id="Qquestion_{{$item->id}}" name="question">
</div>

<div >
  <label for="note">Note</label>
  <input type="text"  id="Qnote_{{$item->id}}" name="note">
</div>

<div >
  <label for="correctAnswer">Correct Answer</label>
  <input type="text"  id="QcorrectAnswer_{{$item->id}}" name="correctAnswer">
</div>

And in jquery you need to add quiz_id

var Qquiz_id = $(this).attr("data-id");
var Qquestion = $('#Qquestion_' Qquiz_id).val();
var Qnote = $('#Qnote_' Qquiz_id).val();
var QcorrectAnswer = $('#QcorrectAnswer_' Qquiz_id).val();