Prevent modal duplication for edit in Laravel - laravel-5.3

Question

I'm trying to to editing using bootstrap modals. My problems is that my current way is including the modals in the foreach loop.
#foreach($users as $user)
<tr>
<td align="center"><input type="checkbox" class="i-checks" name="input[]" value="{{ $user->name }}"></td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
{{ $user->role->name }}
</td>
<td>
#if($user->team_id)
{{ $user->team->name }}
#else
{{ 'N/A' }}
#endif
</td>
<td>
#if($user->is_active == 0)
{{ 'Blocked' }}
#elseif($user->is_active == 1)
{{ 'Active' }}
#endif
</td>
<td>
<a data-toggle="modal" href="#modal-edit-{{ $user->id }}"><i class="fa fa-pencil"></i> Edit</a>
</td>
#include('partials.modals.editUser')
</tr>
#endforeach
And my modal looks like this
<div id="modal-edit-{{$user->id}}" class="modal fade" aria-hidden="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-sm "><h3 class="text-center m-t-none m-b">Edit User</h3>
<form method="POST" action="{{ route('users.update', $user->id )}}">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<div class="form-group"><label>Name</label> <input type="text" placeholder="Enter name" class="form-control" name="name" value="{{ $user->name }}"></div>
<div class="form-group"><label>Email</label> <input type="email" placeholder="Enter email" class="form-control" name="email" value="{{ $user->email }}"></div>
<div class="form-group"><label>Password</label> <input type="password" placeholder="Password" class="form-control" name="password" value="{{ $user->password }}"></div>
<div class="form-group">
<label for="role">Activation</label>
{{ Form::select('activation',
['1' =>'Active',
'0' => 'Blocked',
], $user->is_active, array('class' => 'chosen-select', 'data-placeholder' => 'Choose Activation', 'tab-index' => '4')) }}
</div>
<div class="form-group">
<label for="role">Select Role</label>
{{ Form::select('role',
[1 =>'Admin',
2 => 'Team Leader',
3 => 'Team Member',
], $user->role_id, array('class' => 'chosen-select', 'data-placeholder' => 'Choose a role', 'tab-index' => '4')) }}
</div>
<div class="form-group"><label>Team</label> <input type="text" placeholder="Enter Team" class="form-control" name="team_id" value="{{ $user->team_id }}"> </div>
<input type="submit" class="btn btn-primary btn-rounded btn-block" onclick="pressOnlyOnce()" value="Save Changes">
</div>
</form>
</div>
</div>
</div>
</div>
How can I edit my data using only one modal so that I can place it outside the foreach loop?

Answer 1

You could move the include outside the #foreach loop and add your variables to the button that triggers the modal to use them with javascript.
The button should look like this:
<a data-toggle="modal" href="#modal-edit-{{ $user->id }}" data-user-id="{{ $user->id }}" data-user-active="{{ $user->active }}"><i class="fa fa-pencil"></i> Edit</a>