Show Detail of Data in Bootstrap Modal based on ID - php

Question

I have some edit modal and i want it to show the detail of DATA in bootsrap modal based on ID. Here is my index code:
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?> </h1>
<div class="row">
<div class="col-lg-6">
<?= form_error('menu', '<div class="alert alert-danger" role="alert">','</div>'); ?>
<?= $this->session->flashdata('message'); ?>
Tambah User
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($userRole as $u) : ?>
<tr>
<th scope="row"><?= $i ; ?></th>
<td><?= $u['name']; ?> </td>
<td><?= $u['email']; ?> </td>
<td><?= $u['password']; ?> </td>
<td><?= $u['role']; ?> </td>
<td>
<a href="" class="badge badge-success" data-toggle="modal"
data-target="#editRoleModal">edit</a>
<a href="<?= base_url('admin/deleteuser/') . $u['id'];?>"
class="badge badge-danger">delete</a>
</td>
</tr>
<?php $i++ ; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
And here is my modal :
<!-- Modal Edit-->
<div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<?= form_open_multipart('admin/usermanagement'); ?>
<div class="modal-body">
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="name" name="name" value="<?= $user['name']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="email" class="form-control" id="email" name="email" value="<?= $user['email']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="password" name="password"
value="<?= $user['password']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<select name="menu_id" id="menu_id" class="form-control">
<option value="">Select Role</option>
<?php foreach ($user_role as $u) : ?>
<option value="<?= $u['id']; ?>"><?= $u['role']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
For now It shows the data based on ID, but when i try to click edit button of another data, it show the same detail of one ID only.
I hope that every i click every data button, it shows different detail based on id. I've check similar case already but no one of them that work on my code. I just know my code need some jquery, but i just new on it.

Answer 1

like saad said, place it inside the loop
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?> </h1>
<div class="row">
<div class="col-lg-6">
<?= form_error('menu', '<div class="alert alert-danger" role="alert">','</div>'); ?>
<?= $this->session->flashdata('message'); ?>
Tambah User
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($userRole as $u) : ?>
<tr>
<th scope="row"><?= $i ; ?></th>
<td><?= $u['name']; ?> </td>
<td><?= $u['email']; ?> </td>
<td><?= $u['password']; ?> </td>
<td><?= $u['role']; ?> </td>
<td>
<a href="" class="badge badge-success" data-toggle="modal"
data-target="#editRoleModal<?=$i?>">edit</a>
<a href="<?= base_url('admin/deleteuser/') . $u['id'];?>"
class="badge badge-danger">delete</a>
<!-- Modal Edit-->
<div class="modal fade" id="editRoleModal<?=$i?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<?= form_open_multipart('admin/usermanagement'); ?>
<div class="modal-body">
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="name" name="name" value="<?= $u['name']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="email" class="form-control" id="email" name="email" value="<?= $u['email']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<input type="text" class="form-control" id="password" name="password"
value="<?= $u['password']; ?>">
</div>
<div class="mb-3">
<!-- <label for="exampleInputPassword1" class="form-label">Password</label> -->
<select name="menu_id" id="menu_id" class="form-control">
<option value="">Select Role</option>
<?php foreach ($user_role as $u2) : ?>
<option value="<?= $u2['id']; ?>"><?= $u2['role']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
<?php $i++ ; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>