Unable to get id inside html modal of laravel's blade file - php

Question

I am doing project in laravel. I have multiple records in databse which I have displayed in laravel's blade file using foreach loop. Each record have pending button. Whenever user clicks on pending button it opens a html modal. I want that record id inside the modal but it always take first record id. My blade file looks like,
#foreach($providerData as $newprovider)
<h4>Name:{{$newprovider->name}}</h4>
<button class="btn btn-default" data-toggle="modal" data-target="#Pendingnote">Pending</button>
{!! Form::model( $newprovider->id ,['method' => 'PATCH','action'=>['superadminController#pendingProvider', $newprovider->id]]) !!}
<div class="modal fade" id="Pendingnote" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Note {!! $newprovider->id !!}</h4>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="note" value="{{ old('note') }}">
</div>
<div class="modal-footer">
{!! Form::submit('Add', ['class' => 'btn btn-default']) !!}
</div>
</div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
{!! Form::close() !!}
#endforeach
Whichever record is clicked, it always returns $newprovider->id as first record's id. I don't know where I am getting wrong. Please help and thanks in advance.

Answer 1

Do these things in order to get the modals work.
Edit the button to:
<button class="btn btn-default" data-toggle="modal" data-target="#Pendingnote{{$newprovider->id}}">Pending</button>
And the modal container to:
<div class="modal fade" id="Pendingnote{{$newprovider->id}}" role="dialog">

Answer 2

All modal-triggering buttons have data-target="#Pendingnote", which means they all trigger the first modal with that id they can find.
You could try for instance removing the data-target attribute and trigger the modal with a bit of jQuery, like:
$('button[data-toggle]').on('click', function () {
$(this).next('form').find('.modal').modal('show');
});
I would suggest anyway to have the forminside the modal instead. So the jQuery would be:
$('button[data-toggle]').on('click', function () {
$(this).next('.modal').modal('show');
});
Lastly, take a look at this: http://getbootstrap.com/javascript/#modals-related-target