Bootstrap 4 foreach table rows & and individual edit modals

The simple & best way to do it on the page load itself load all the edit modals inside foreach loop like below and give unique ID for the modals.

<table>
<tr>
<td>Name</td>
<td<Edit</td>
</tr>
@foreach($contacts as $contact)
<tr>
<td>{{$contact->name}}</td>
<td>
<button class="btn btn-warning btn-sm" data-toggle="modal" data-id="{{ $contact->id }}" data-target="#editModal{{$contact->id}}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <strong>Edit</strong> </button>
</td>
</tr>
<!-- add edit modal -->
<div id="editModal{{$contact->id}}" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Edit {{$contact->name}}</h4><br>
                </div>
                <div class="modal-body">
                    {{ Form::open(array('url' => 'http://yourdomain/updatecontact/'.$contact->id)) }}
                   <input type="text" name="first_name" value="{{$contact->first_name}}">
                  <input type="text" name="email" value="{{$contact->email}}">
                  <input type="text" name="phone" value="{{$contact->phone}}">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" >Save</button>
                 {{ Form::close()}}
                </div>
            </div>
        </div>
    </div>
<!-- ./add edit modal -->

@endforeach 
</table>

Make sure you have included the bootstrap library for enabling modal popups.

Return a html form instead of Json Object

Example

Blade view for form (contact/form-fields.blade.php)

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" value="{{ $contact->email }}">
  </div>
  <div class="form-group">
    <label for="firstname">First Name</label>
    <input type="text" class="form-control" id="irstname" placeholder="Password"  value="{{ $contact->first_name }}">
  </div>

Controller Method

public function edit($id) {
    $contact = Contact::find($id);
    return view('contact.form-fields.php',compact('contact'));
}

Use Bootstrap Model Events to load form-fields

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
})

Code samples are just for demo purpose.

@mwpdx If you read the Bootstrap documentation, I think this is the section you want:

http://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Considering you have the json object already, use the ajax success function to set the values.

success: function(data) {
    $("TheFieldName").val(data.TheFieldName);

    // Toggle the modal
    $("#editModal").modal('toggle');
}